Select option not working correctly..

[xwishmasterx]

Complete java-noob need a little help.

 

I have this small script that generates simple dropdown menu depending on previous selection:

var populateSubList = function() {
	var firstList = document.getElementById("list_One");
	var secondList = document.getElementById("list_Two");
	if (firstList && secondList) {
		var value = firstList.options[firstList.selectedIndex].value;
		secondList.options.length = 0;
		
		/* Do some work here to create elements to add to the second list */
		if (value == "hw") {
			var newOption = document.createElement("OPTION");
			newOption.text = "hw firmware";
			newOption.value = "fw_ukendt";
			newOption.id = "fw_ukendt";
			secondList.add(newOption);
		} else if (value == "2601") {
		var newOption = document.createElement("OPTION");
			newOption.text = "2601 firmware1";
			newOption.value = "fw1";
			newOption.id = "fw1";
			secondList.add(newOption);
		} else {
		
		}
	}
};

Now the above code works perfect, but I just can't seem to add another "item". My logic brought me to simply duplicate an option like so:

var populateSubList = function() {
	var firstList = document.getElementById("list_One");
	var secondList = document.getElementById("list_Two");
	if (firstList && secondList) {
		var value = firstList.options[firstList.selectedIndex].value;
		secondList.options.length = 0;
		
		/* Do some work here to create elements to add to the second list */
		if (value == "hw") {
			var newOption = document.createElement("OPTION");
			newOption.text = "hw firmware";
			newOption.value = "fw_ukendt";
			newOption.id = "fw_ukendt";
			secondList.add(newOption);
		} else if (value == "2601") {
		var newOption = document.createElement("OPTION");
			newOption.text = "2601 firmware1";
			newOption.value = "fw1";
			newOption.id = "fw1";
			secondList.add(newOption);



		var newOption = document.createElement("OPTION");
			newOption.text = "2601 firmware2";
			newOption.value = "fw2";
			newOption.id = "fw2";
			secondList.add(newOption);


		
		} else {
		
		}
	}
};

This does show a new option in the menu, but can't be chosen...

 

Can someone enlighten me on how to make it work?

[Psycho]

Create the options for each item in list one as an array in javascript. Then determine which array to use based upon the selected item in list one and iterate through the array. Lastly, create a sub-function to actually create the options instead of replicating the code to do so.

 

Working example: http://jsfiddle.net/QFDf8/

[xwishmasterx]

I see it works as intended - however a crucial thing is missing: "newOption.id" variables are gone

[Psycho]

I see it works as intended - however a crucial thing is missing: "newOption.id" variables are gone

 

Why do you need an ID property for the option tags? It is not sent in the form data. Do you have additional JavaScript that uses the ID's of the options for something? If you really need it - add it back.

Edited March 24, 2014 by Psycho