php – jQuery动态下拉框ajax

发布时间：2020-12-13 17:14:28 所属栏目：PHP教程来源：网络整理

导读：我目前有两个下拉框和一个文本框. 我使用数据库查询来填充第一个下拉框和ajax来填充第二个下拉列表,具体取决于在第一个下拉列表中选择的值.一旦选择了第二个下拉列表中的选择,我也使用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",data: "mod="+val2,success: function (html2) {  
               $('#powerOpts').html(html2);    
               }
              });
                }
              });

    });

    $( "#modelOpts" ).change(function(){
            val1 = $(this).attr("value");
            $.ajax({
               url: "inc/class/data.php",data: "mod="+val1,success: function (html1) {  $('#powerOpts').attr("value",html1);  }
              });

            // $("#modelOpts").selectmenu('refresh',true);
    });

解决方法

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!