Question

我使用Select Option Element制作了3个下拉列表。在一个列表中，我手动插入数据，而在另外两个中，我从Ajax获取数据。

我的问题是我想在默认情况下选择特定选项。它已成功应用于第一个列表，但是当我尝试在其他2个列表中应用代码时，它不会受到影响。

代码段

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

Ajax Success回调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>");
  }
}

当我触发按钮上的Click事件时

$(".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;
});

在下拉列表

1 个答案: