下拉值未保留

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