Dynamically add html select onClick of another select box option

Question

I have one select box

<select id="combo_main" size="4" class="mutiple">
              <option>Client Management</option>
              <option>User Management</option>
              <option>Store Management</option>
              <option>Task Management</option>
            </select></div>

on click of any of the options of the select box another select box has to be created with different options

this is the current code ive written

    $("#combo_main").on(
  { "focus": function() {
      //console.log('clicked!', this, this.value);
      this.selectedIndex = -1;
    }
  , "change": function() {
      choice = $(this).val();
      //console.log('changed!', this, choice);
      this.blur();
      setTimeout(function() { alert('Chose '+ choice);



    var newCB= document.createElement("select");
    newCB.id = 'txtT';      

var myOptions = {
    "Value 1" : "Text 1",
    "Value 2" : "Text 2",
    "Value 3" : "Text 3"
}
$("#txtT").addOption(myOptions, false);

$("body").append(newCB);

    }, 0);
    }
  });

I am getting the error

Uncaught TypeError: undefined is not a functionadd_user.html:50 (anonymous function)

at this line

$("#txtT").addOption(myOptions, false);

updated the question not able to add the same plus i feel my code is incorrect for what i am trying to achieve — usr30911, Dec 09 '14 at 12:51
`addOption` is not a function .. check this out : http://stackoverflow.com/questions/19358385/jquery-addoption-and-selectoptions — Qarib Haider, Dec 09 '14 at 12:54
`addOption` is this function defined somewhere in your page? — Jai, Dec 09 '14 at 12:57
SyedQarib is right no function with that name exist. Also you're trying add options to select that's not on the form. Perhaps this article is useful for: http://stackoverflow.com/questions/10578619/jquery-dynamically-create-select-tag — jyrkim, Dec 09 '14 at 12:58

score 1 · Accepted Answer · answered Dec 09 '14 at 13:18

You can use the following script, here is a JSFIDDLE. I've changed the structure of the myOptions a littlebit.

        $("#combo_main").on(
            {"focus": function() {
                    this.selectedIndex = -1;
                        }
                        , "change": function() {
                            choice = $(this).val();
                            //console.log('changed!', this, choice);
                            this.blur();
                            setTimeout(function() {
                                alert('Chose ' + choice);

                                //var newCB = document.createElement("select");
                                //newCB.id = 'txtT';

                                var myOptions = [
                                    {'val': "Value 1", 'text': "Text 1"},
                                    {'val': "Value 2", 'text': "Text 2"},
                                    {'val': "Value 3", 'text': "Text 3"}
                                ];
                                var s = $('<select id="txtT" name="txtT" />');
                                $(myOptions).each(function(idx, obj) {
                                    //console.log(idx);
                                    //console.log(obj.text);
                                    $("<option />", {value: obj.val, text: obj.text}).appendTo(s);

                                });
                                $("body").append(s);
                    }, 0);
                }
            });

thanks it worked as i wanted just a little more help, what do i do if i want it to show only one more select box at a time , now for every option it keeps adding multiple onto the html — usr30911, Dec 09 '14 at 13:52
You have 2 solutions for this. Before you added the new select, remove the existing one, or check, is there a select element with id `txtT`. — vaso123, Dec 09 '14 at 13:54

Dynamically add html select onClick of another select box option

1 Answers1