Dynamically creation select box options issue in IE8

Question

I am using the following function to create a add options to my select box

  //add options to the requested select box
  addOptionsToSelect : function(__enum , obj, selected_value) {
    $(__enum).each(function(i){
       var optn = new Option(this.text, this.val)
       if(selected_value === this.val){  optn.setAttribute('selected', 'selected') } 
       $(obj)[0].options.add(optn); 
    });
    return obj
  }

__enum is the key value pair containing the value and the text that we pass to the select option
obj is the select box obj which is also created dynamically
selected_value is the value that needs to set as selected on the select box.

The problem here is optn.setAttribute('selected', 'selected') works fine in all the browsers expect IE8.

I am looking for a workaround that will allow me to set the selected value in all the browsers dynamically.

`$(obj)[0] === obj` No need to make a jQuery object if you're not going to use it. — , Aug 23 '13 at 23:16
@adeneo: *"1. `__enum` is the key value pair containing the value and the text that we pass to the select option."* — , Aug 23 '13 at 23:19
@CrazyTrain - Then it should be `$.each(__enum, function(k,v) {...` as `$(element).each` is for jQuery objects like DOM nodes. — adeneo, Aug 23 '13 at 23:22
@Raghu ...or if my above suggestion doesn't work, try adding the option to the `obj` first, then `obj.selectedIndex = obj.options.length - 1;` — , Aug 23 '13 at 23:23
Also, `$(obj)[0].options.add(optn);` makes little sense, add() is a jQuery method, so what exactly is `$(obj)[0].options` ? — adeneo, Aug 23 '13 at 23:25
To answer the question, try `$(optn).prop('selected', true)` — adeneo, Aug 23 '13 at 23:26
@adeneo: *"2. `obj` is the select box obj which is also created dynamically."* Select elements have an `.add()` method. — , Aug 23 '13 at 23:26
@CrazyTrain - if that's the case `$(obj).val(this.val)` should work as well. — adeneo, Aug 23 '13 at 23:29
@CrazyTrain - and it doesn't matter what `obj` is, `$(obj)[0].options` has to be a jQuery collection of elements for add() to work. — adeneo, Aug 23 '13 at 23:30
@adeneo: `select` elements as well as the `.options` collection have a native `.add()` method for adding `option` elements. — , Aug 23 '13 at 23:31
@CrazyTrain - that's true, but that method requires two parameters, so this is most likely the jQuery version. — adeneo, Aug 23 '13 at 23:33
@CrazyTrain I tried all your possibilities, none of them are liked by IE8. I tried $(obj).val(this.val) , optn.selected = true; , optn.selected = true; and obj.selectedIndex = obj.options.length - 1; . — Raghu, Aug 23 '13 at 23:36
@Raghu: Did you add the new `option` element to the `select` before setting the selection? — , Aug 23 '13 at 23:37
...in other words, put `obj.options.add(optn);` above the `if` statement instead of below. — , Aug 23 '13 at 23:40
That's odd. Try this: `var optn = new Option(this.text, this.val, false, selected_value === this.val);` Not sure if IE supports all those args. — , Aug 23 '13 at 23:44
@CrazyTrain i think you are right , let me move that statement before i set the selected value — Raghu, Aug 23 '13 at 23:44
@CrazyTrain I tried moving that statement before i set the selection but for some reason IE is still acting like a dork — Raghu, Aug 23 '13 at 23:53
Do your option elements have `value` attributes? If so, then try `obj.value = this.val;` inside the `if` statement. If that doesn't work, then there's something else going on in your code. — , Aug 23 '13 at 23:58
@CrazyTrain You were right the method that i posted in above just works fine in all the browsers . the problem was with some other code where i was cloning this select method to get the OuterHTML of the select and the clone() used to screw up my selected values. i removed that clone() (http://stackoverflow.com/questions/742810/clone-isnt-cloning-select-values) and things started working as expected across all the browsers. I would like to thank you for all your help here :) — Raghu, Aug 24 '13 at 00:58

score 1 · Answer 1 · answered Aug 24 '13 at 00:37

1

I'd add an option to a like so:

var select = document.getElementById("drop-down");
var newOption = document.createElement("option");
newOption.innerHTML = 'hello';
select.appendChild(newOption);

Here's an example: my fiddle

answered Aug 24 '13 at 00:37

user2712640

31
2

Dynamically creation select box options issue in IE8

1 Answers1