未保留下拉值

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總體只發生一次，您需要在發生事件偵聽器後才能將其刪除。事情是這樣：

$('.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/>')) 
     }); 
    } 
    }); 
});