Dynamically Adding Options

Question

I have the following html structure and am trying to add in option elements in the optgroups via javascript. I am using the jquery mobile framework as well.

Html as follows:

<form>
    <div class="ui-field-contain">
    <label for="selectID">Look-up</label>
    <select name="select-native-4" id="selectID">
       <option>Choose...</option>

           <optgroup label="G1" id="group1">                              
           </optgroup>
           <optgroup label="G2" id="group2">
           </optgroup>
           <optgroup label="G3" id="group3">
           </optgroup>

           </select>
       </div>
  </form>

The javascript is as follows.

for( var i = 0; i < array.length; i++){
        var item = array[i];
        var $option = $('<option> ' + item.name + ' </option>');
        $option.prop('value', item.memb);
        console.log(item.name);
        var tp = -1;
        switch(item.name){
            case 'group1' :
                tp = 1;   break;
            case 'group2' :
                tp = 2;   break;
            case 'group3' :
                tp = 3;   break;
        }
        console.log(tp);
        //$("#selectID :nth-child(tp)").append($option);

        $("#selectID").eq(tp).append($option);
    }
    $('#selectID').selectmenu('refresh');
}

I am confused as to why the .eq(n) does not append the $option object to the nth child of #selectID, which would be an optgroup. Thanks for any help!

Why would you expect .eq(n) to add to a child? .eq(n) selects the nth element that matches the selector. — Barmar
– Barmar, Commented Jun 11, 2014 at 15:17
that would hit the option, not the optgroup elements. see resolve below. — Maxwell Donathan
– Maxwell Donathan, Commented Jun 11, 2014 at 15:19

Maxwell Donathan · Accepted Answer · 2014-06-11 15:21:08Z

1

You only have 1 #selectID. You need:

$('#selectID optgroup').eq(tp).append($option);

This will hit the optgroups inside your select id.

edited Jun 11, 2014 at 15:21

answered Jun 11, 2014 at 15:16

Maxwell Donathan

1,53710 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan · Accepted Answer · 2014-06-11 15:27:37Z

0

Your code is appending to the Select object not the optgroup.

.eq(index) gives you an object at that index that matches the selector. In this case there is only one select so you're away going to get it.

Here's how I would handle this example.

I would write the $option definition line like this.

var $option = '<option> ' + item.name + ' </option>';

In place of the switch statement I'd put this.

$("#"+item.name).append($option);

ID's should be unique for the entire HTML page so this should be the only group with that ID. That being the case you can add it directly to that optgroup

edited Jun 11, 2014 at 15:27

answered Jun 11, 2014 at 15:18

Dan

2,8437 gold badges42 silver badges56 bronze badges

5 Comments

Barmar Over a year ago

Why don't you think you can use $ in a variable name? jQuery does, it uses the variable named $ all the time.

Dan Over a year ago

Can't that cause conflicts with JQuerys $ operator?

Maxwell Donathan Over a year ago

only with the dot notation: $.

Barmar Over a year ago

What kind of conflict? A variable Foo doesn't cause a conflict with a variable F, so why would $option cause a conflict with $? Do you think there's something special about $? It's not an operator, it's just the name of a function.

Dan Over a year ago

@Barmar Updated to reflect this talk.

Collectives™ on Stack Overflow

Dynamically Adding Options

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related