このコードには、ドロップダウンリストとids "OtherName"と "OtherDesc"という2つのテキストボックスが含まれています。ドロップダウンリストから「その他」以外の値を選択した場合、2つのテキストボックスを削除/削除したいと思います。ここに私のコードはありますが、それはなぜ考えていないのですか?ドロップボックスの選択に基づいてテキストボックスを削除/削除します
<div class="form-group">
@Html.LabelFor(model => model.CategoryId, "Category", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("CategoryId", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
</div>
</div>
<div id="OtherName" class="form-group" >
@Html.LabelFor(model => model.tbl_Category.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.tbl_Category.CategoryName, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div id="OtherDesc" class="form-group">
@Html.LabelFor(model => model.tbl_Category.CategoryDesc, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.tbl_Category.CategoryDesc, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
jQueryの
$(document).ready(function() {
//this line fires no matter what
$("#OtherName").hide();
$("#OtherDesc").hide();
$("#CategoryId").change(function() {
var value = document.getElementById("CategoryId").value;
if (value == "1011") {
$("#OtherName").show();
$("#OtherDesc").show();
}
else {
$("#OtherName").remove();
$("#OtherDesc").remove();
}
});
})
あなたの場合、あなたは最初の隠れを欠場し、要素を選択しなければなりませんイベントハンドラの内側と外側の2回です。あるいは、 'change'イベントを手動で1回トリガします。 – eisbehr
@eisbehr:私は選択ハンドラのみを変更しました。他のコードに問題はありません:) –