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);

Answer 1

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);
                }
            });