[英]javascript to dynamically populate dropdown with an array from value typed into text field
Hi I have a code example available here: http://jsbin.com/oxoweh 嗨,我这里有一个代码示例: http : //jsbin.com/oxoweh
My problem is that I cannot get the value that is being entered into the textbox so that when the select button is clicked the second dropdown will display only the data related to what was entered into the text box. 我的问题是我无法获取在文本框中输入的值,因此,当单击选择按钮时,第二个下拉列表将仅显示与在文本框中输入的内容有关的数据。 for example if fruits is entered into the textbox I want to have the subcat dropdown have all fruits in it instead of using the existing category dropdown menu 例如,如果在文本框中输入了水果,我想让subcat下拉菜单中包含所有水果,而不是使用现有的类别下拉菜单
http://jsfiddle.net/goldentoa11/P3hs8/1/ http://jsfiddle.net/goldentoa11/P3hs8/1/
I added a parameter to your "SelectSubCat()" called txtValue. 我向您的“ SelectSubCat()”添加了一个名为txtValue的参数。 This is so you can pass the value you want to compare against. 这样,您就可以传递要与之比较的值。
You'll need to call the "SelectSubCat()" function with the text field's value when you call it. 调用时,需要使用文本字段的值来调用“ SelectSubCat()”函数。 I added an id to the text field called "selectText", and when I click the button I had added 我在名为“ selectText”的文本字段中添加了一个ID,并在单击按钮时添加了
onclick="SelectSubCat(document.getElementById('selectText').value)"
and this will call the function with the text of the input. 这将使用输入文本来调用该函数。 Then instead of using the value from the form, it uses the value passed to it, and creates the appropriate sub category. 然后,它不使用表单中的值,而是使用传递给它的值,并创建适当的子类别。 Lastly, you need to change the Category's "onchange" function to just pass an empty string. 最后,您需要更改类别的“ onchange”功能以仅传递一个空字符串。
function SelectSubCat(txtValue) {
if(txtValue == "") txtValue = document.drop_list.Category.value;
// This line is to set txtValue to Category's value if the current value is blank.
// In other words, if it was called by changing the dropdown,
// give it the drop down's value.
// ON selection of category this function will work
removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");
if (txtValue == 'Fruits') {
addOption(document.drop_list.SubCat, "Mango", "Mango");
addOption(document.drop_list.SubCat, "Banana", "Banana");
addOption(document.drop_list.SubCat, "Orange", "Orange");
}
if (txtValue == 'Games') {
addOption(document.drop_list.SubCat, "Cricket", "Cricket");
addOption(document.drop_list.SubCat, "Football", "Football");
addOption(document.drop_list.SubCat, "Polo", "Polo", "");
}
if (txtValue == 'Scripts') {
addOption(document.drop_list.SubCat, "PHP", "PHP");
addOption(document.drop_list.SubCat, "ASP", "ASP");
addOption(document.drop_list.SubCat, "Perl", "Perl");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.