Question

Hi I have a code example available here: 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

Answer 1

http://jsfiddle.net/goldentoa11/P3hs8/1/

I added a parameter to your “SelectSubCat()” called 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. I added an id to the text field called “selectText”, and when I click the button I had added

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.

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");
}

}