Question

在这段代码中，我从php文件中获取选定的值并分配它，但每次都不起作用。假设我刷新它然后可以分配一个值而另一个可能不分配，有时两者都没有分配。问题是什么？ selectedcaste.php返回以下内容：

{"cast":"BC","busrout":"B20"}

出于测试目的，我对其进行了硬编码，但我遇到了同样的问题。

$.ajax({url:"phpajax/selectedcaste.php",success:function(result){
    var valoresArea=result; // it has the multiple values to set, separated by comma
    var obj = jQuery.parseJSON(valoresArea);

    $('#caste').val(obj.cast).attr("selected", "selected");
    $('#route').val(obj.busrout).attr("selected", "selected");


    //$('#caste').select2("val",obj.cast);
    //$('#route').select2("val",obj.busrout);
}});

这里是我的完整java脚本

$(function(){
    // for loading caste list from database at run time
     var items="";
     $.getJSON("phpajax/caste.php",function(data){
     $.each(data,function(index,item) 
        {

        items+="<option value='"+item.Name+"'>"+item.Name+"</option>";
        });
    $("#caste").html(items); 
  });


    // for loading route  list from database at run time
     var items2="";
     $.getJSON("phpajax/route.php",function(data){
     $.each(data,function(index,item) 
        {

        items2+="<option value='"+item.Name+"'>"+item.Name+"</option>";
        });
    $("#route").html(items2); 
  });



    // assign selected value from records
    $.ajax({url:"phpajax/selectedcaste.php",success:function(result){
    var valoresArea=result; // it has the multiple values to set, separated by comma
    var obj = jQuery.parseJSON(valoresArea);

     $('#caste').val($.trim(obj.cast)).attr("selected", "selected");
     $('#route').val($.trim(obj.busrout)).attr("selected", "selected");


    //$('#caste').select2("val",obj.cast);
    //$('#route').select2("val",obj.busrout);

  }});


});

我的HTML

<select name="caste"  id="caste"  style="width: 100%;">
<!--   <option value="0" selected="selected" >Choose an option...</option>-->

</select>
<select name="route"  id="route"   style="width:100%;">                             

</select>

错误

一段时间选择正确。一段时间选择一个。有些时候都没有被选中。如果我每次正确提醒但没有正确选择时使用警报声明。我正在使用bootstrap 2.0主题。感谢

Answer 1

而不是

$('#caste').val(obj.cast).attr("selected", "selected");

只需使用

$('#caste').val(obj.cast);

或者（由于空格而有时会出现问题）使用$.trim()删除空格，如下所示： -

$('#caste').val($.trim(obj.cast));

Answer 2

而不是 -

$('#caste').val(obj.cast).attr("selected", "selected");
$('#route').val(obj.busrout).attr("selected", "selected");

仅限使用 -

$('#caste').val(obj.cast);
$('#route').val(obj.busrout);

DEMO

的 UPDATE -

您正在同时3 ajax request asynchronously。asynchronous时，您无法控制回调的顺序。

您的third ajax callback可能会在second and first callback之前执行，导致在填充选项之前将值设置到选择框中。

因此，请确保您的first and second callback在执行之前执行third callback。

使用$.when将多个ajax回调处理为单回调

$(function () { // for loading caste list from database at run time var items = ""; $.when($.getJSON("phpajax/caste.php"), $.getJSON("phpajax/route.php")) .done(function (data1, data2) {//execute when both ajax request completed var items = ""; var items2 = ""; console.log(data1[0],data2[0]); $.each(data1[0], function (index, item) { items += "<option value='" + item.Name + "'>" + item.Name + "</option>"; }); $("#caste").html(items);//filling 1'st select $.each(data2[0], function (index, item) { items2 += "<option value='" + item.Name + "'>" + item.Name + "</option>"; }); $("#route").html(items2);//filling 2'nd select //Making third request for setting values $.ajax({url:"phpajax/selectedcaste.php",success:function(result){ var valoresArea=result; // it has the multiple values to set, separated by comma var obj = jQuery.parseJSON(valoresArea); $('#caste').val(obj.cast); $('#route').val(obj.busrout); }}); });

如何在jQuery下拉列表中选择值

2 个答案:

DEMO

的 UPDATE -