ドロップボックスの選択に基づいてテキストボックスを削除/削除します

Question

このコードには、ドロップダウンリストと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(); 
      } 
     }); 
    }) 

Answer 1

.remove() DOM completely.Youから要素を削除する要素を削除するのではなく、.hide()を使用する必要があります。

また、さまざまな方法でコードを最適化することができます。同様

1）

2）は、両方の要素をターゲットに複数のセレクタを使用して、1回のコールでそれらを表示/非表示を再度idでそれを取得するのではなく、選択のコンテキストをクリックし使用します。あなたのコードを変更する方法

$("#CategoryId").change(function() { 
     var value = this.value; 
     $("#OtherName,#OtherDesc").toggle(value == "1011"); 
}); 

Answer 2

いくつかのアドバイス：

1. あなたの要素のセレクターを組み合わせることができます。

2. removeの代わりにhideを使用してください。さもなければあなたの要素は永遠に消え去ります。

3. あなたはすでにjQueryを使用していますので、jQuery上でも値を取得できません。

4. 値は1回だけ必要なので、変数宣言valueは必要ありません。

5. の略語$(function() {});があります。

コード：

$(function() { 
    var boxes = $("#OtherName, #OtherDesc").hide(); 

    $("#CategoryId").change(function() { 
     if($(this).val() == "1011") 
      boxes.show(); 
     else 
      boxes.hide(); 
    }); 
}); 

でも短いあなたの代わりにshowとhideのtoggleに行くことができます：

$(function() { 
    var boxes = $("#OtherName, #OtherDesc").hide(); 

    $("#CategoryId").change(function() { 
     boxes.toggle($(this).val() == "1011"); 
    }); 
});