опции Загрузка выпадающие динамически

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/

Нажмите на событие выберите не работает, к сожалению.

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

Вы можете сделать это, как 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