在另一个选择框选项的单击事件中动态添加HTML选择框

22 浏览
0 Comments

在另一个选择框选项的单击事件中动态添加HTML选择框

我有一个选择框

在选择框的任何选项上点击时

必须创建另一个具有不同选项的选择框

这是我目前编写的代码

    $("#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('选择了 '+ choice);
    var newCB= document.createElement("select");
    newCB.id = 'txtT';      
var myOptions = {
    "选项1" : "文本1",
    "选项2" : "文本2",
    "选项3" : "文本3"
}
$("#txtT").addOption(myOptions, false);
$("body").append(newCB);
    }, 0);
    }
  });

我遇到了错误

Uncaught TypeError: undefined is not a functionadd_user.html:50

(anonymous function)

在这一行

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

0

1 答案

0 Comments

动态添加HTML select选项是常见的前端开发需求。当一个select框的选项发生改变时，希望能够根据选项的值动态增加另一个select框。下面是一个可以实现该功能的代码：

$("#combo_main").on(
    {"focus": function() {
            this.selectedIndex = -1;
        }
        , "change": function() {
            choice = $(this).val();
            this.blur();
            setTimeout(function() {
                alert('Chose ' + choice);
                var myOptions = [
                    {'val': "Value 1", 'text': "Text 1"},
                    {'val': "Value 2", 'text': "Text 2"},
                    {'val': "Value 3", 'text': "Text 3"}
                ];
                // 检查是否已经存在id为"txtT"的select元素
                if ($("#txtT").length) {
                    $("#txtT").remove(); // 如果存在，先移除已有的select元素
                }
                var s = $('');
                $(myOptions).each(function(idx, obj) {
                    $('', {value: obj.val, text: obj.text}).appendTo(s);
                });
                $("body").append(s); // 添加新的select元素
            }, 0);
        }
    });

以上代码使用jQuery实现了动态添加select选项的功能。当id为"combo_main"的select框选项改变时，会根据选中的值动态生成一个新的select框，并添加到body元素中。如果已经存在id为"txtT"的select元素，则先移除已有的select元素。

如果希望每次只显示一个额外的select框，可以在添加新的select元素之前先检查是否已经存在id为"txtT"的select元素，并进行相应的处理。以上代码提供了两种解决方案：一是移除已有的select元素，二是检查是否存在id为"txtT"的select元素。

希望以上内容对你有帮助！

0