Javascript 如何使用JQuery和Ajax使用另一个组合框的内容更新HTML文件中组合框的内容

我是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);
        }
    });
});

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

“BrandsController/ajaxquery”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);
        }
    });
});

{
    "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));
    });
}

功能更改SelectOptions（selectId、newOptions）{
变量$element=$（selectId）；
$element.empty（）；//删除旧选项
$.each（新选项、函数（值、键）{
$element.append（$（“”）
.attr（“值”，value）.text（键））；
});
}

您在后端运行的是什么？php？您调用的url应该指向一个脚本，该脚本读取post值，从数据库或其他任何地方检索所需数据，并将该值作为json返回。当数据从服务器发回时，将调用success函数（它是一个回调函数），并能够根据需要处理数据（例如，操纵第二个组合框）。不，我没有php文件。我只有一个java类，其中有一个我想要运行的函数，我希望能够像第一个一样填充另一个选择菜单。这只是一个想法，我不知道这是否是最好的方法。任何建议都很好，所以我假设您不会在网页上以小程序的形式运行java，因为在这种情况下使用javascript（这里是jquery）对我来说没有意义。当您只在后端运行java时（并且您使用java的servlet类——我不是java方面的专家），情况也是如此。。。返回包含数据的json，jquery ajax函数将捕获该数据并进行处理，例如：success:function（data）{console.log（data）；}>在浏览器控制台中输出数据。我试试看。我想我首先需要学习如何用php从数据库中检索数据。不客气。如果你使用java，为什么不坚持使用java呢？在服务器上运行什么并不重要。php可能是最容易学习的，但这取决于您是否运行java、php、ruby、node.js或其他软件。可以肯定的是：java（后端）不是javascript（前端）-两者都是完全不同的语言，主要是在名称中共享“java”。。。还不太清楚，你的实际知识点是什么。谢谢。我想这会管用的。您还可以告诉我如何将url“BrandsController/ajazquery”映射到BrandsController类中的一个函数，该函数将返回所需的对象。这个映射部分是我最困惑的地方，因为类似问题的大多数解决方案都映射到一个php文件，而不是我想在这里执行的java类函数，为什么不搜索“java ajax示例”？看起来这里给出的链接应该可以帮助你，或者让你把问题具体化。