Question

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

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

所以点击'其他'我想在下拉列表中添加更多选项，从下拉列表中删除'其他'。我可以这样做吗？

Answer 1

试试这个

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

DEMO

Answer 2

可能这就是你想要的：

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

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

Answer 3

$("#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/

选择上的点击事件不幸地无效。

Answer 4

你可以这样做是像

这样的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);
    }
}

Here is the JSFiddle

动态加载下拉选项

4 个答案: