动态加载下拉选项

Loading dropdown options dynamically

本文关键字：选项 加载 动态      更新时间：2023-09-26

在html中，我有一个带有三个选项的select标记，点击第三个选项，我想在下拉列表中加载更多选项。。。这是代码：

<select id="title">
    <option val="0">Mr.</option>
    <option val="1">Mrs.</option>
    <option val="2">Others</option>
</select>

因此，点击"其他"，我想在下拉列表中加载更多选项，从下拉列表中删除"其他"。。我该怎么做？

$("#title").change(function(event){
    var selected = $(event.target).val();
    if (selected === "2")
    {
        $(event.target).children("[value='2']").remove();
        $(event.target).append("<option value='3'>Other one</option>");
    }
});

JSFiddle

保持下拉列表打开（不优雅）：

$("#title").change(function(event){
    $(event.target).attr('size', 1);
    var selected = $(event.target).val();
    if (selected === "2")
    {
        $(event.target).children("[value='2']").remove();
        $(event.target).append("<option value='3'>Other one</option>");
        $(event.target).attr('size', $(event.target).children().length);
    }
});

http://jsfiddle.net/ZPupj/8/

不幸的是，单击选择上的事件不起作用。

这可能就是您想要的：

http://jsfiddle.net/vvHZ3/1/

$("#others").click(function(){
    $('#others').hide();
    $("#title").append("<option value='"Any'" >item</option>");});

您可以使用类似的javascript

<select id="title" onchange="DDOnChange(this)">
    <option val="0">Mr.</option>
    <option val="1">Mrs.</option>
    <option val="2">Others</option>
</select>
DDOnChange = function DDOnChange(obj)
{
    if (obj.value == 'Others')
    {
        var option1=document.createElement("option");
        option1.text="Others1";
        var option2=document.createElement("option");
        option2.text="Others2";
        obj.add(option1,null);
        obj.add(option2,null);
        obj.remove(obj.selectedIndex);
    }
}

这是JSFiddle

试试这个

$('#title').on('change',function()
           {
               if(this.value == 'Others');
               {
                  $('#ot').remove();
                  $('#title').append(' <option val="2">Your 1 option</option>');
               }
           });

演示

相关文章：