ドロップダウンの値が保持されていません

Question

私はモデルからその値を取得し、最初に値が設定されるドロップダウンを持っています。そのドロップダウンをクリックすると、AJAXを使用して他の値が設定されます。ドロップダウンに値を設定できますが、ドロップダウンからオプションを選択すると、ドロップダウンの最初の値にリセットされます。私が欲しいのは、ドロップダウンをクリックした後、通常のドロップダウンのように機能させることです。どのように私はそれの条件を置くのですか？

これは、最初に定義された値とドロップダウン値を設定するためのコードである「field.Value」

ddlValue = "<option value="+field.Value+ " selected='selected'>" + field.Value+"</option>"; 

<td><select id='@String.Format("selValue{0}", field.Field)' class='ddlValue'>@Html.Raw(ddlValue)</select></td> 

そして、これは、それを移入AJAX関数です。

$('body').on('click', '.ddlValue', function() { 
    var target = event.target.id; 
    var rowId = $('#' + target).closest("tr").prop("id"); 
    var field = $('#' + rowId).find(".fieldvalue").html(); 

     $.ajax({ 
      cache: false, 
      url: '@Url.Action("PopulateDropdown", "AdvancedSearch")', 
      type: "POST", 
      data: { Field: field } 
     }).done(function (data) { 

      var listb = $('#' + target); 
      listb.empty(); 

      $.each(data.value, function (index, value) { 
       listb.append($('<option>', { 
        value: value, 
        text: value 
       }, '<option/>')) 
      }); 

     }); 

}); 

Answer 1

ajax集団が1回だけ発生するようにするには、イベントリスナーが発生した後に削除する必要があります。そのような何か：

$('.ddlValue').on('click', function() { 

    $(this).off('click'); //This removes the event after it has happened once. 

    var target = event.target.id; 
    var rowId = $('#' + target).closest("tr").prop("id"); 
    var field = $('#' + rowId).find(".fieldvalue").html(); 

    $.ajax({ 
     cache: false, 
     url: '@Url.Action("PopulateDropdown", "AdvancedSearch")', 
     type: "POST", 
     data: { Field: field } 
    }).done(function (data) { 

     var listb = $('#' + target); 
     listb.empty(); 

     $.each(data.value, function (index, value) { 
      listb.append($('<option>', { 
       value: value, 
       text: value 
      }, '<option/>')) 
     }); 

    }); 

}); 

注意してください、フォローはしますない作品：

$('body').on('click', '.ddlValue', function() { 
    $(this).off('click'); 
    ... 

Answer 2

これは、これを行うの愚かな方法のように思えます。あなたは、ユーザーとのやりとりをしなくても、同じ操作をローンで行うことができます。

あなたのソリューションを修正するといわれていることは、単にグローバル変数

$first = true 
$('body').on('click', '.ddlValue', function() { 
    if($first) { 
     $first = false 
     var target = event.target.id; 
     var rowId = $('#' + target).closest("tr").prop("id"); 
     var field = $('#' + rowId).find(".fieldvalue").html(); 
     $.ajax({ 
     cache: false, 
     url: '@Url.Action("PopulateDropdown", "AdvancedSearch")', 
     type: "POST", 
     data: { Field: field } 
     }).done(function (data) { 
     var listb = $('#' + target); 
     listb.empty(); 
     $.each(data.value, function (index, value) { 
     listb.append($('<option>', { 
      value: value, 
      text: value 
     }, '<option/>')) 
     }); 
    } 
    }); 
});