Question

我调试了我的ajax调用，该调用是由（然后从服务器接收数据）执行的，id_TableName和id_ColumnName是我的html页面上我的两个选择组件的名称;

function tableSelectionChanged()
        {
            var selected_table = $("#id_TableName option:selected").text();
            $.get('/historicaldata/input_parameters/', {selected_table : selected_table}, function(data){
            $("#id_ColumnName").val(data);
            });
        }

服务器返回的数据采用以下格式;

(('option1', 'option1'),
('option2', 'option2'))

依旧......

我认为这条线存在问题;

$("#id_ColumnName").val(data);

我尝试使用从服务器重新发送的选项来填充select组件的选项。

Answer 1

Put server side code    
    $strOption ="<option value=0 >Select All</option>";
            while($row =   mysql_fetch_array($result))
            {
         $strOption.= "<option value='".$row['location']."' >".$row['location']."</option>";
        }
       echo $strOption;

客户端代码 $（'＃cmbProject'）。change（function（）{ $ .post（“callajx.php？drpname = Location”，$（“＃DataAnalytics”）。serialize（），function（response）{
$（'＃cmbLocation'）。find（'option'）。remove（）。end（）。append（response）.val（'Select All'）; }）;

Answer 2

除了你应该使用html()来设置选项之外，你返回数据的格式相当奇怪，并且会给你带来麻烦。你有两个选择。

首先，您可以从AJAX请求中返回HTML（具体如何执行此操作取决于您的服务器端代码）...

<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="foobar">FooBar</option>

...然后将其直接设置为html()元素的select属性。

function tableSelectionChanged() {
    var selected_table = $("#id_TableName option:selected").text();
    $.get('/historicaldata/input_parameters/', { selected_table : selected_table }, function(data){
        $("#id_ColumnName").html(data);
    });
}

选项2是返回AJAX并自己构建HTML。在这种情况下，返回的数据会更小（因此UI可以更快地检索），但需要更多的JS处理。

{
    "options": [{
        "foo": "Foo"
    }, {
        "bar": "Bar"
    }, {
        "foobar": "FooBar"
    }]
}

function tableSelectionChanged() {
    var selected_table = $("#id_TableName option:selected").text();
    $.get('/historicaldata/input_parameters/', { selected_table : selected_table }, function(data){
        for (var i = 0; i < data.options.length; i++) {
            for (var key in data.options[i]) {
                $('<option />', {
                    value: key,
                    text: data.options[i][key]
                }).appendTo('select');
            }
        }
    });
}

Example fiddle

选择选项不更新但AJAX调用正在运行

2 个答案: