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

How to update the contents of a ComboBox in a HTML file using the contents of another with JQuery and Ajax

本文关键字：ComboBox 更新 HTML 文件 的内 JQuery Ajax 另一个 何使用      更新时间：2023-09-26

我是 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 参数调用它。

你可以尝试这样的事情：

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

"BrandsController/ajaxquery"网址应该返回如下内容：

{
    "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));
    });
}
相关文章：