下拉值未被保留

Dropdown value not being retained

本文关键字：保留      更新时间：2023-09-26

我有一个下拉菜单，它从一个模型中获取它的值，并首先填充。单击该下拉菜单后，我使用AJAX填充其他值。我能够填充下拉菜单，但是一旦我从下拉菜单中选择了一个选项，它就会在下拉菜单中重置为第一个值。我想要的是下拉填充一次点击，然后像一个正常的下拉功能。我该如何为它设置一个条件?

这是初始设置下拉值与定义值'字段的代码。价值"

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

如果希望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');
    ...

这样做似乎很愚蠢。您可以在loan上执行相同的操作，而无需与用户进行任何交互来填充下拉列表。

也就是说，修复你的解决方案只需添加一个全局变量

$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/>'))
       });
     }
   });
});
相关文章：