在下拉列表中設置選定的選項

Question

我有3個使用選擇選項元素製作的下拉列表。在一個列表中，我手動插入數據，而另外兩個數據則是從Ajax獲取數據。

我的問題是，我想使默認情況下選擇特定的選項。它已成功應用於第一個列表，但是當我嘗試將代碼應用於其他兩個列表時，它不會受到影響。

代碼段

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

阿賈克斯成功回調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; 
});