jQuery动态下拉框ajax

Question

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

我正在使用数据库查询来填充第一个下拉框，并使用 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);