加載下拉選項動態

Question

在HTML我有三個optrions一個選擇標記，點擊第三個選項我想多幾個選擇加載到下拉... 下面是代碼：

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

所以點擊「其他」，我想在下拉菜單中加載更多選項，從下拉菜單中刪除「其他」。如何才能做到這一點？

Answer 1

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

Click事件選擇不遺憾的是工作。

Answer 2

試試這個

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

DEMO

Answer 3

可能這是你想要什麼：

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

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

Answer 4

你可以這樣做就像是

<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