未保留下拉值

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