Выпадающее значение не сохраняется

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