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：undefined不是functionadd_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);
                }
            });

动态添加html select onClick另一个选择框选项

1 个答案: