Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer fill select (drop down) element dynamically

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,176
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    12
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,176
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •