jQuery动态下拉框ajax

我目前有两个下拉框和一个文本框。

我使用数据库查询来填充第一个下拉框和ajax来填充第二个下拉列表，具体取决于在第一个下拉列表中选择的值。 一旦选择了第二个下拉列表中的选择，我也使用ajax来填充输入文本框。

我的问题是，使用我当前的代码，当我从第一个下拉列表中选择一个选项时，虽然它在第二个下拉框中填写了从ajax返回的数据，但我也希望它也能输入输入框并返回该值在第二个下拉值更新的同时。

$( "#manufacturerOpts" ).change(function(){ val1 = $(this).attr("value"); $.ajax({ url: "inc/class/data.php", type: "POST", data: "manu="+val1, cache: false, success: function (html1) { $('#modelOpts').html(html1); val2 = $("#modelOpts option").attr("value"); $.ajax({ url: "inc/class/data.php", type: "POST", data: "mod="+val2, cache: false, success: function (html2) { $('#powerOpts').html(html2); } }); } }); }); $( "#modelOpts" ).change(function(){ val1 = $(this).attr("value"); $.ajax({ url: "inc/class/data.php", type: "POST", data: "mod="+val1, cache: false, success: function (html1) { $('#powerOpts').attr("value",html1); } }); // $("#modelOpts").selectmenu('refresh', true); }); 

Answer 1

您可以修改您的请求以发送文本框的值以及下拉菜单选项

 $.ajax({ url: "inc/class/data.php", type: "POST", data: "manu="+val1, dataType: 'json', success: function (data) { $('#modelOpts').html(data.modelOpts); $('#powerOpts').html(data.powerOpts); } }); 

在服务器端代码中，您可以轻松找到modelOpts下拉列表的第一个选项的值并发送它

 $data = array('modelOpts' => modelOptsHtml, 'powerOpts' => powerOptsHtml); echo json_encode($data);