fill select (drop down) element dynamically

developer-si · 08-13-2010, 11:15 AM

Hello everyone!

I have a select (combo box) element that gets filled with items when selected item changed in another one (master combo box). It works in Chrome, FireFox but not in IE (all latest browser versions).

How do I populate the items in the child combo box:
- ajax call of a PHP script
- that returns items for the combo box: echo '<option value="' . $id . '">' . $name . '</option>';
- setting innerHTML attribute of the child combo box to a value that gets returned by the ajax call: document.forms['parametersForm'].elements['stationId'].innerHTML = html;

Do I need to return JSON object (or XML) by the PHP script and programically add items (in JavaScript) in the ajax callback or is there an alternative? Obviously building DOM with echoing PHP result doesn't work well in IE.

Thanks for your future help!

Regards

Old Pedant · 08-13-2010, 09:06 PM

It should work just fine in IE if it's coded right.

Maybe if you showed the code you are using now????

FWIW, for a simple list of <option>s you probably don't need to use JSON. Just returning a list of string values would surely work fine. But there's also no reason JSON shouldn't work.

gumape · 08-13-2010, 10:41 PM

Hi,

the problem is that the innerHTML attribute of a select element cannot be set in IE. It does not cause an error, but it does not work.

The following example does not work in IE, but it works in Firefox, Chrome, Safari and Opera:

Code:

<head>
    <script>
		function Init () {
			var response = "<option>1</option><option>2</option>";

			var select = document.getElementById ("mySelect");
			select.innerHTML = response;
        }
    </script>
</head> 
<body onload="Init ()">
	<select id="mySelect"></select>
</body>

A possible solution if the ajax response is a comma separated list of values and texts ("value1,text1,value2,text2, ...") and the options are created one by one:

Code:

<head>
    <script>
		function Init () {
			var response = "value1,text1,value2,text2";
			var responseArr = response.split (",");

			var select = document.getElementById ("mySelect");

			for (var i = 0; i < responseArr.length; i+=2) {
				var option = new Option (responseArr[i+1], responseArr[i]);
				select.options.add (option);
			}
        }
    </script>
</head> 
<body onload="Init ()">
	<select id="mySelect"></select>
</body>

Related links:
Option object,
options collection.

developer-si · 08-14-2010, 12:30 AM

I did exactly as gumape said. But I returned JSON from PHP. So the PHP constructs 2D array, encodes to JSON (json_encode() function), returns it, JavaScript gets the response with ajax, evals it (eval() function) and processes as gumape said. Cause setting innerHTML attribute in IE really doesn't work.

If someone wants to know more about that, I can provide additional info.

Old Pedant · 08-14-2010, 12:45 AM

Yep, would have suggested doing exactly that if I'd read the original post more carefully where you said you were trying to use innerHTML. The 2D array from JSON is better suited for creating Option elements, anyway, rather than using innerHTML.