Question

我是JQuery和Ajax的初学者，想知道当另一个组合框的内容发生变化时，我如何在html文件中更新组合框的内容。

我有两个选择框，希望第二个选项框在用户选择第一个选项时更新。之前已经提出过这个问题，但解决方案不够明确。

$.ajax({

            type : "POST",
            data : {
                brand : document.form1.brandsFrom.value
            },
            url : "BrandsController/ajaxquery",
            beforeSend : function() {
            },
            async : false,
            success : function(data) {
                result = data;
            }
        });

我在使用第一个SELECT选项卡的onchange监听器执行的函数中调用此ajax代码。什么是最好的方法去做。就像我在我的一个类中有一个函数可以执行处理部分，但我如何通过这个AJAX代码的url参数调用它。

Answer 1

您可以尝试这样的事情：

$( "#comboBox1" ).change(function() {
    $.ajax({
        type : "POST",
        data : {
            brand : document.form1.brandsFrom.value
        },
        url : "BrandsController/ajaxquery",
        beforeSend : function() {
        },
        async : false,
        success : function(data) {
            newOptions = data;
            changeSelectOptions("#comboBox2",newOptions);
        }
    });
});

＆＃34; BrandsController / ajaxquery＆＃34; url应该返回这样的内容：

{
    "Option 1": "value1",
    "Option 2": "value2",
    "Option 3": "value3"
};

只需编写此功能即可更改选择选项

function changeSelectOptions(selectId,newOptions) {
    var $element = $(selectId);
    $element.empty(); // remove old options
    $.each(newOptions, function(value,key) {
      $element.append($("<option></option>")
         .attr("value", value).text(key));
    });
}

如何使用另一个使用JQuery和Ajax的内容更新HTML文件中ComboBox的内容

1 个答案: