Установите выбранный вариант в выпадающем списке

Question

У меня есть 3 раскрывающегося списка, сделанных с использованием элемента выбора варианта. В одном списке я вставляю данные вручную, а в двух других я получаю данные из Ajax.

Мой вопрос заключается в том, что я хочу, чтобы по умолчанию была выбрана специальная опция. Он успешно применяется в первом списке, но когда я пытаюсь применить код в другом списке 2, он не будет затронут.

Код сниппета

<select id="box1">...</select> 
<select id="box2">...</select> 
<select id="box3">...</select> 

Ajax успеха Обратный вызов для Box2 для вставки опций

success: function(data){ 
    modalFloorData = data; 
    $("#demo2").attr("disabled",false);       
    $("#demo2").html("<option value=''>Select Any Floor</option>"); 
    for(var i=0; i< data.length;i++){ 
     $("#box2").append("<option value='"+data[i].id+"''>"+data[i].name+"</option>"); 
    } 
} 

Когда я вызвал Нажмите событие на кнопку

$(".editBtn").on("click",function(e){ 
    var demoName1 = "value1"; 
    var demoName2 = "value2"; 
    var demoName3 = "value3"; 

     //Ajax Code for fetching Data for the 2 Dropdown List box2 & box 3 
     //In box1 I am inserting options manually. 

    $("#box1 option[value='"+demoName1+"']").attr("selected","selected");//Getting Success 
    $("#box2 option[value='"+demoName2+"']").attr("selected","selected"); 
    $("#box3 option[value='"+demoName3+"']").attr("selected","selected"); 
    return false; 
}); 

Любая помощь будет оценена ... !!

Answer 1

Вы должны установить значение в обратном вызове ajax. Поскольку ajax является асинхронным. Значения устанавливаются перед выгрузкой погрузки. Также вы можете использовать val() вместо attr() для установки выбранного значения.

$(".editBtn").on("click", function (e) { 
    var demoName1 = "value1"; 
    var demoName2 = "value2"; 
    var demoName3 = "value3"; 

    $.ajax({ 
     url: '...', 
     type: '...', 
     data: '...', 
     success: function (result) { 
      //do your stuff 
      //..... 
      //..... 

      $("#box2").val(demoName2); 
      $("#box3").val(demoName3); 
     } 
    }) 

    $("#box1").val(demoName1); 
    return false; 
});