jQuery来填补数据库中的多个下拉列表 [英] jquery to fill multiple dropdown list from database
问题描述
我知道如何填单下拉框从数据库中使用jQuery的值。 但现在我需要很长的查询中过滤掉使用下拉5表中的字段。 也就是说，通过选择第一，我需要改变剩下的4下拉菜单列表值，并通过改变第二个下拉，我需要改变其他3 dropddowns等等。 为了改变单一的下拉列表中，我利用Ajax技术发送到一个URL，然后再返回的HTML，并把它的，选择字段中。
jQuery.ajax（{
键入：POST，
网址：getdb / TB，
数据：{数据：数据}
成功：功能（数据）{
jQuery的（选择＃field_1）HTML（returnval）。
}，
失败：功能（响应）{
警报（失败）;
}
}）;
而在我的网址getdb / TB，我筛选出查询中使用SELECT语句和回声出选项字段。
但我不知道如何将多个HTML选项字段发到我的其他4个下拉菜单，在第一个下拉携带一个变化的功能。请帮助和对我是初学者。提前致谢。
更新： 它是一个好办法做到像这样
jQuery.ajax（{
-
-
成功：功能（数据）{
callfirst（）;
}
}）;
功能callfirst（）{
jQuery.ajax（{
-
-
成功：功能（数据）{
callsecond（）;
}
}）;
}
功能callsecond（）{
jQuery.ajax（{
-
-
成功：功能（数据）{
callthird（）;
}
}
您的方法是精细，但它需要很多AJAX调用把选项值的所有选择字段。您可以在一个单一的Ajax调用使用JSON做到这一点。在PHP页面中，您可以创建一个将包含HTML字符串重新presenting四个选择框的选项数组。然后，你可以使用json_en code数组转换为JSON字符串（）函数：
<$p$p><$c$c>$arr=array("second"=>"<option>....</option>.......<option...</option>", //为第二个下拉列表 第三个=＆gt;中＆LT;选项＆GT; ...＆LT; /选项＆GT; ......＆LT;选项...＆LT; /选项＆gt;中，//第三下拉 第四个=＆gt;中＆LT;选项＆GT; ...＆LT; /选项＆GT; ......＆LT;选项...＆LT; /选项＆gt;中，//第四下拉 十五=＆gt;中＆LT;选项＆GT; ...＆LT; /选项＆GT; ......＆LT;选项...＆LT; /选项＆gt;中//第五下拉 ）; 回声json_en code（$ ARR）;
然后在网页上，对于第一个下拉，你可以写一个jQuery函数是这样的：
函数loadOptions（）{
jQuery.ajax（{
成功：功能（数据）{
jQuery的（选择＃field_2）HTML（数据[第二]）。
。jQuery的（选择＃field_3）HTML（数据[第三]）;
jQuery的（选择＃field_4）HTML（数据[四]）。
jQuery的（选择＃field_5）HTML（数据[十五]）。
}
}）;
}
在这种方式，你可以加载了一个Ajax调用其他所有下拉菜单中的选项。据我所知，你需要其他下拉菜单类似的功能，以及。你可以写类似的功能，其他的下拉菜单也。这里是一个广义的功能，在您通过下拉号和函数将返回进行有针对性的下拉式菜单中的选项。例如，如果你通过下拉2号，该函数将返回选项的下拉列表中3，4和5。如果你通过3时，将返回下拉列表4,5选项，等等。
函数loadOptions（selectNo）{
jQuery.ajax（{
数据：{selectNo，selectNo}，
成功：功能（数据）{
开关（selectNo）{
案例1：jQuery的（选择＃field_2）HTML（数据[第二]）;
案例2：jQuery的（选择＃field_3）HTML（数据[第三]）;
案例3：jQuery的（选择＃field_4）HTML（数据[四]）;
案例4：jQuery的（选择＃field_5）HTML（数据[十五]）;
}
}
}）;
}
在PHP页面，你可以写下面的code来实现这种功能：
$ selectNo = $ _ GET [selectNo];
$ ARR =阵列（）;
开关（selectNo）{
案例1：$ ARR [秒] =＆LT;选项＆GT; ...＆LT; /选项＆GT; ......＆LT;选项...＆LT; /选项＆gt;中; //为第二个下拉列表
案例2：$ ARR [第三] =＆LT;选项＆GT; ...＆LT; /选项＆GT; ......＆LT;选项...＆LT; /选项＆gt;中; //第三下拉
案例3：$ ARR [四] =＆LT;选项＆GT; ...＆LT; /选项＆GT; ......＆LT;选项...＆LT; /选项＆gt;中; //为第四个下拉列表
案例4：$ ARR [十五=＆LT;选项＆GT; ...＆LT; /选项＆GT; ......＆LT;选项...＆LT; /选项＆gt;中; //第五下拉
}
回声json_en code（$ ARR）;
有关JSON的更多信息可以在这里找到 。
I know how to fill a single dropdown box with the values from a database using jQuery. But now i need to make a long query to filter out 5 table fields using dropdown. That is, by selecting the first , i need to change the remaining 4 dropdowns list value, and by changing the second dropdown, i need to change the other 3 dropddowns and so on. For changing a single dropdown, i made use of Ajax to send to a URL, and then returning the html and placing it inside the , select field.
jQuery.ajax({
type: "POST",
url: "getdb/tb",
data: '{data : "data" }',
success: function (data) {
jQuery("select#field_1").html(returnval);
},
failure: function (response) {
alert("failed");
}
});
And in my URL "getdb/tb" , i filter out the query using SELECT statement and echo out the option field.
But i dont know how to send multiple html option field to my 4 other dropdowns with a single change function carried in the first dropdown. Please help and treat me a beginner. Thanks in advance.
UPDATE : Is it a good way to do like this
jQuery.ajax({
-
-
success: function(data){
callfirst();
}
});
function callfirst(){
jQuery.ajax({
-
-
success: function(data){
callsecond();
}
});
}
function callsecond(){
jQuery.ajax({
-
-
success: function(data){
callthird();
}
}
Your way is fine- but it will need many ajax calls to bring option values for all select fields. You can accomplish this in a single ajax call using JSON. At the PHP page, you can create an array which will contain the HTML strings representing the options for the four select boxes. Then you can convert this array to a JSON string using the json_encode() function:
$arr=array("second"=>"<option>....</option>.......<option...</option>", //for second dropdown
"third"=>"<option>....</option>.......<option...</option>", //for third dropdown
"fourth"=>"<option>....</option>.......<option...</option>", //for fourth dropdown
"fifth"=>"<option>....</option>.......<option...</option>" //for fifth dropdown
);
echo json_encode($arr);
Then on the webpage, for the first dropdown, you can write a jQuery function like this:
function loadOptions(){
jQuery.ajax({
success: function(data){
jQuery("select#field_2").html(data["second"]);
jQuery("select#field_3").html(data["third"]);
jQuery("select#field_4").html(data["fourth"]);
jQuery("select#field_5").html(data["fifth"]);
}
});
}
In this way, you can load the options for all other dropdowns in one ajax call. I understand that you need a similar functionality for other dropdowns as well. You can write similar function for other dropdowns also. Here is a generalized function, in which you pass the dropdown number and the function will return the options for targeted dropdowns. For example, if you pass dropdown number 2, the function will return options for dropdowns 3, 4 and 5. If you pass 3, it will return options for dropdowns 4 and 5, and so on.
function loadOptions(selectNo){
jQuery.ajax({
data:{"selectNo",selectNo},
success: function(data){
switch(selectNo){
case 1: jQuery("select#field_2").html(data["second"]);
case 2: jQuery("select#field_3").html(data["third"]);
case 3: jQuery("select#field_4").html(data["fourth"]);
case 4: jQuery("select#field_5").html(data["fifth"]);
}
}
});
}
On the PHP page, you can write the code below to implement this functionality:
$selectNo=$_GET["selectNo"];
$arr=array();
switch(selectNo){
case 1: $arr["second"]="<option>....</option>.......<option...</option>"; //for second dropdown
case 2: $arr["third"]="<option>....</option>.......<option...</option>"; //for third dropdown
case 3: $arr["fourth"]="<option>....</option>.......<option...</option>"; //for fourth dropdown
case 4: $arr["fifth"="<option>....</option>.......<option...</option>"; //for fifth dropdown
}
echo json_encode($arr);
More information about JSON can be found here.
这篇关于jQuery来填补数据库中的多个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
