根据另一个下拉列表的选择动态填充下拉列表 [英] dynamically populate a dropdown list based on the selection of another dropdown list
问题描述
我正在使用Javascript，JSP，Servlets开发Web应用程序。我的表单中有2个下拉列表，第一个是表单加载时自动填充的，我已经在Jsp中编写了这个代码并且它也正常工作，但是现在我希望一旦用户从1stDD选择一个选项然后立即第二个DD应该根据所做的选择进行填充....
1stDD使用差异表，2ndDD也是如此，但是他们的记录与外键绑定..每次都是1stDD的选择选项更改我需要使用刷新的值自动填充2ndDD ...我如何实现这一点，任何建议？
谢谢，
Hi,
I am developing a webapplication using Javascript,JSP,Servlets. I have 2 dropdown lists in my form, the first one is autopopulated on form load , I have written this code in Jsp and its working as well, but now I want that once a user selects an option from the 1stDD then immediately the 2nd DD should be populated depending on the selection made....
The 1stDD uses a diff table and so does the 2ndDD , however their records are tied with a foreign key ..everytime the selected-option of 1stDD changes I need the 2ndDD to be auto-populated with refreshed values...how can I achieve this, any suggestions?
Thanks,
推荐答案
我正在使用Javascript，JSP，Servlets开发Web应用程序。我的表单中有2个下拉列表，第一个是表单加载时自动填充的，我已经在Jsp中编写了这个代码并且它也正常工作，但是现在我希望一旦用户从1stDD选择一个选项然后立即第二个DD应该根据所做的选择进行填充....
1stDD使用差异表，2ndDD也是如此，但是他们的记录与外键绑定..每次都是1stDD的选择选项更改我需要使用刷新的值自动填充2ndDD ...我如何实现这一点，任何建议？
谢谢，
Hi,
I am developing a webapplication using Javascript,JSP,Servlets. I have 2 dropdown lists in my form, the first one is autopopulated on form load , I have written this code in Jsp and its working as well, but now I want that once a user selects an option from the 1stDD then immediately the 2nd DD should be populated depending on the selection made....
The 1stDD uses a diff table and so does the 2ndDD , however their records are tied with a foreign key ..everytime the selected-option of 1stDD changes I need the 2ndDD to be auto-populated with refreshed values...how can I achieve this, any suggestions?
Thanks,
您好，
我正在使用Javascript，JSP，Servlets开发Web应用程序。我的表单中有2个下拉列表，第一个是表单加载时自动填充的，我已经在Jsp中编写了这个代码并且它也正常工作，但是现在我希望一旦用户从1stDD选择一个选项然后立即第二个DD应该根据所做的选择进行填充....
1stDD使用差异表，2ndDD也是如此，但是他们的记录与外键绑定..每次都是1stDD的选择选项更改我需要使用刷新的值自动填充2ndDD ...我怎么能实现这一点，任何建议？
谢谢，
Hi,
I am developing a webapplication using Javascript,JSP,Servlets. I have 2 dropdown lists in my form, the first one is autopopulated on form load , I have written this code in Jsp and its working as well, but now I want that once a user selects an option from the 1stDD then immediately the 2nd DD should be populated depending on the selection made....
The 1stDD uses a diff table and so does the 2ndDD , however their records are tied with a foreign key ..everytime the selected-option of 1stDD changes I need the 2ndDD to be auto-populated with refreshed values...how can I achieve this, any suggestions?
Thanks,
如果我的描述很好，
你可以使用隐藏的选择来存储值。示例
您在分行表中有一个银行表和一个带有银行密钥的分支表。
您想要选择一个银行到用该银行的brances填充第二个下拉列表。然后
每个银行
1.）加载XX + bankkey进入选择。 （字符串XX后跟银行密钥）
2.）找到该银行的所有分行，并在他们的银行名称后不久将其加载到选择中。
最后你的选择会有类似
XXBank1
bbank1a
bbank1b
....
XXBank2
bbank2a
bbank2b
XXBank3
bbank3a < br $> b $ b ....
每家银行都跟着它的分行。
在选择你然后调用javascript方法，例如
[HTML]
< select name = "银行" onChange =" populateBankBranches（this.formName）">
[/ HTML]
在一边填充银行分行，做一些像（假设隐藏的选择我们加载的银行和分支机构被称为dataSelect）
[PHP]
函数populateBankBranches（表单）{
var bankSelect = form .bankCode;
var branchSelect = form.bankBranchCode;
var index;
var all = form.dataSelect.options.length;
branchSelect.options.length = 0;
var bank = form.bankCode.options [form.bankCode.selectedIndex] .value;
var end = false;
var temp = 0;
for（i = 0;（i< all）&&（end == false）; i ++）{
var current = form.dataSelect.options [i] .value;
if（current ==" XX" + bank）{
index = i + 1;
var cur = form.dataSelect.options [index] .value;
var cursub = cur.substring（0，bank.length） ;
whil e（cursub == bank）{
var nextValue = form.dataSelect.options [index] .value;
var nextText = form.dataSelect.options [index]。 text;
branchSelect.options [temp ++] = new Option（nextText，nextValue）;
index = index + 1;
cur = form .dataSelect.options [index] .value;
var cursub = cur.substring（0，bank.length）;
}
end = true;
}
}
}
[/ PHP]
If I got your description well,
you can use a hidden select to store the values. Example
You have A table of Banks and a table of Branches with Bank key in Branches table.
You want selection of a bank to populate second drop down with brances for that bank. Then
for each bank
1.) load "XX" +bankkey into the select. (the string XX followed by the bank key)
2.) find all the branches of that bank an load them in the select soon after their bank name.
At the end your select would have something like
XXBank1
bbank1a
bbank1b
....
XXBank2
bbank2a
bbank2b
XXBank3
bbank3a
....
Each bank is followed by it''s branches.
On the select you then call a javascript method eg
[HTML]
<select name = "bank" onChange = "populateBankBranches(this.formName)">
[/HTML]
In side populate bank branches, do something like(Assuming the hidden select that we loaded banks and branches to is called dataSelect)
[PHP]
function populateBankBranches(form) {
var bankSelect = form.bankCode;
var branchSelect = form.bankBranchCode;
var index;
var all = form.dataSelect.options.length;
branchSelect.options.length = 0;
var bank = form.bankCode.options[form.bankCode.selectedIndex].value;
var end = false;
var temp = 0;
for (i = 0;(i < all) && (end == false); i++) {
var current = form.dataSelect.options[i].value;
if(current == "XX"+bank ) {
index = i + 1;
var cur = form.dataSelect.options[index].value ;
var cursub = cur.substring(0, bank.length);
while(cursub == bank) {
var nextValue = form.dataSelect.options[index].value;
var nextText = form.dataSelect.options[index].text;
branchSelect.options[temp++] = new Option(nextText, nextValue);
index = index + 1;
cur = form.dataSelect.options[index].value;
var cursub = cur.substring(0, bank.length);
}
end = true;
}
}
}
[/PHP]
如果我的描述很好，
您可以使用隐藏的选择来存储值。示例
您在分行表中有一个银行表和一个带有银行密钥的分支表。
您想要选择一个银行到用该银行的brances填充第二个下拉列表。然后
每个银行
1.）加载XX + bankkey进入选择。 （字符串XX后跟银行密钥）
2.）找到该银行的所有分行，并在他们的银行名称后不久将其加载到选择中。
最后你的选择会有类似
XXBank1
bbank1a
bbank1b
....
XXBank2
bbank2a
bbank2b
XXBank3
bbank3a < br $> b $ b ....
每家银行都跟着它的分行。
在选择你然后调用javascript方法，例如
[HTML]
< select name = "银行" onChange =" populateBankBranches（this.formName）">
[/ HTML]
在一边填充银行分行，做一些像（假设隐藏的选择我们加载的银行和分支机构被称为dataSelect）
[PHP]
函数populateBankBranches（表单）{
var bankSelect = form .bankCode;
var branchSelect = form.bankBranchCode;
var index;
var all = form.dataSelect.options.length;
branchSelect.options.length = 0;
var bank = form.bankCode.options [form.bankCode.selectedIndex] .value;
var end = false;
var temp = 0;
for（i = 0;（i< all）&&（end == false）; i ++）{
var current = form.dataSelect.options [i] .value;
if（current ==" XX" + bank）{
index = i + 1;
var cur = form.dataSelect.options [index] .value;
var cursub = cur.substring（0，bank.length） ;
whil e（cursub == bank）{
var nextValue = form.dataSelect.options [index] .value;
var nextText = form.dataSelect.options [index]。 text;
branchSelect.options [temp ++] = new Option（nextText，nextValue）;
index = index + 1;
cur = form .dataSelect.options [index] .value;
var cursub = cur.substring（0，bank.length）;
}
end = true;
}
}
}
[/ PHP]
If I got your description well,
you can use a hidden select to store the values. Example
You have A table of Banks and a table of Branches with Bank key in Branches table.
You want selection of a bank to populate second drop down with brances for that bank. Then
for each bank
1.) load "XX" +bankkey into the select. (the string XX followed by the bank key)
2.) find all the branches of that bank an load them in the select soon after their bank name.
At the end your select would have something like
XXBank1
bbank1a
bbank1b
....
XXBank2
bbank2a
bbank2b
XXBank3
bbank3a
....
Each bank is followed by it''s branches.
On the select you then call a javascript method eg
[HTML]
<select name = "bank" onChange = "populateBankBranches(this.formName)">
[/HTML]
In side populate bank branches, do something like(Assuming the hidden select that we loaded banks and branches to is called dataSelect)
[PHP]
function populateBankBranches(form) {
var bankSelect = form.bankCode;
var branchSelect = form.bankBranchCode;
var index;
var all = form.dataSelect.options.length;
branchSelect.options.length = 0;
var bank = form.bankCode.options[form.bankCode.selectedIndex].value;
var end = false;
var temp = 0;
for (i = 0;(i < all) && (end == false); i++) {
var current = form.dataSelect.options[i].value;
if(current == "XX"+bank ) {
index = i + 1;
var cur = form.dataSelect.options[index].value ;
var cursub = cur.substring(0, bank.length);
while(cursub == bank) {
var nextValue = form.dataSelect.options[index].value;
var nextText = form.dataSelect.options[index].text;
branchSelect.options[temp++] = new Option(nextText, nextValue);
index = index + 1;
cur = form.dataSelect.options[index].value;
var cursub = cur.substring(0, bank.length);
}
end = true;
}
}
}
[/PHP]
------------------------------------------ -------------------------------------------------- -----------------------
Thnku你的建议，它有效，我每个表使用一个隐藏字段。
在每个页面上加载相应表格的记录，以隐藏字段中的字符串形式存储。此字符串的格式为＃ID~BankName frm 1st table and存储在第一个隐藏字段中，＃ID~BrName frm第二个隐藏字段中的第二个表，以便后来我从这个字符串中取出单个字段sayin split（）
关于更改 - 1stDD的事件我把用户选择的选项（即：BankName）变成''temp''变量并调用一个函数，我将这个val与存储在第一个隐藏字段中的Bank-names进行比较，如果thres然后我拿出相同记录的ID，并将其与第二个隐藏字段中存储的记录的ID逐一进行比较，如果匹配在这里，那么我从该记录中取出BankName并简单地添加它作为第二个DD的选项..
Thnx再次..
-------------------------------------------------------------------------------------------------------------------
Hi,
Thnku fr ur suggestion, it worked, I used a couple of hidden fields one for each table.
On every page-load the records frm the corresponding table get stored in the form of a string in the hidden field.This string is in the format #ID~BankName frm 1st table and stored in 1st hidden field and #ID~BrName frm second table in the second hidden field, so that later I cn take out individual fields from this strings sayin split()
On the change-event of the 1stDD I take the option(ie:BankName) selected by the user into a ''temp'' variable and call a function whr I m comparing this val with the Bank-names stored in the 1st hidden field , if thres a match then I take out the ID for the same record and compare it one by one with the ID of the records stored in the 2nd hidden field if thrs a match here as well then I take out the BankName from that record and simply add it as an option to the 2nd DD..
Thnx a lot again..
这篇关于根据另一个下拉列表的选择动态填充下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
