動態添加另一個選擇框選項的html select onClick

Question

我有一個選擇框

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

單擊選擇框的任何選項時，必須使用不同的選項創建另一個選擇框

這是我寫的當前代碼

    $("#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);
    }
  });

我收到錯誤

未捕獲的TypeError：未定義不是函數add_user.html：50（匿名函數）

在這條線

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

Answer 1

您可以使用以下腳本，這是一個JSFIDDLE 。 我稍微修改了myOptions的結構。

        $("#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);
                }
            });