jQuery动态下拉框ajax [英] jQuery dynamic dropdown box ajax
问题描述
我目前有两个下拉框和一个文本框。
I currently have two dropdown boxes and a textbox.
我使用数据库查询来填充第一个下拉框和ajax来填充第二个下拉列表,具体取决于第一个下拉列表中选择的值。一旦选择了第二个下拉列表中的选择,我也使用ajax来填充输入文本框。
I am using a database query to fill the first dropdown box and ajax to fill the second dropdown, depending on the value chosen in the first dropdown. I also am using ajax to fill in the input textbox once a selection from the second dropdown is chosen.
我的问题是,使用我当前的代码,当我从第一个下拉列表中选择一个选项时,尽管它在第二个下拉框中填写了从ajax返回的数据,我也希望它也能输入输入框,并在第二个下拉值更新的同时返回该值。
My problem is, with my current code, when I choose an option from the first dropdown, although it DOES fill in the second dropdown box with the data returned from ajax, I also want it to ajax the input box as well and return that value at the same time as the second dropdown value updates.
$( "#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);
});
推荐答案
您可以修改您的请求以发送值文本框以及下拉菜单选项
You can modify your request to send the value for the textbox along with the dropdown menu options
$.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
下拉并发送它
and in you server-side code you can easily find out the value of the first option for the modelOpts
dropdown and send it as well
$data = array('modelOpts' => modelOptsHtml, 'powerOpts' => powerOptsHtml);
echo json_encode($data);
这篇关于jQuery动态下拉框ajax的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!