Добавить поле ввода при выборе конкретной опции в выпадающее меню

Question

Мне нужно добавить вход к опции выбора, когда она выбрана. всякий раз, когда пользователь выбирает «другое», для ввода данных пользователю необходимо ввести поле ввода.

HTML:

<select> 
    <option>Choose Your Name</option> 
    <option>Frank</option> 
    <option>George</option> 
    <option>Other</option> 
</select> 

<!-- when other is selected add input 
<label>Enter your Name 
<input></input> 
</label> --> 

мой jsfiddle: http://jsfiddle.net/rynslmns/CxhGG/1/

Answer 1

Вы можете использовать jquery .change(), чтобы связать событие изменения элемента.

Попробуйте это:

HTML

<select> 
    <option>Choose Your Name</option> 
    <option>Frank</option> 
    <option>George</option> 
    <option>Other</option> 
</select> 
<label style="display:none;">Enter your Name 
<input></input> 
</label> 

Jquery

$('select').change(function(){ 
    if($('select option:selected').text() == "Other"){ 
     $('label').show(); 
    } 
    else{ 
     $('label').hide(); 
    } 
}); 

Try in Fiddle

Обновлено:

Вы также можете добавить входной ящик динамически -

HTML

<select> 
    <option>Choose Your Name</option> 
    <option>Frank</option> 
    <option>George</option> 
    <option>Other</option> 
</select> 

Jquery

$('select').change(function(){ 
    if($('select option:selected').text() == "Other"){ 
     $('html select').after("<label>Enter your Name<input></input></label>"); 
    } 
    else{ 
     $('label').remove(); 
    } 
}); 

Try in Fiddle

Answer 2

See it in action here.

HTML:

<select id="choose"> 
    <option>Choose Your Name</option> 
    <option>Frank</option> 
    <option>George</option> 
    <option value="other">Other</option> 
</select> 
<label id="otherName">Enter your Name 
    <input type="text" name="othername" /> 
</label> 

JQuery:

$(document).ready(function() { 
    $("#choose").on("change", function() { 
     if ($(this).val() === "other") { 
      $("#otherName").show(); 
     } 
     else { 
      $("#otherName").hide(); 
     } 
    }); 
}); 

Обратите внимание на атрибут value="other" на «Другой». Вот как скрипт определяет, выбрана ли опция «Другой».

Надеюсь, это поможет!

Answer 3

Вот чисто Javascript версия, не Jquery не требуется:

<script> 
// Put this script in header or above select element 
    function check(elem) { 
     // use one of possible conditions 
     // if (elem.value == 'Other') 
     if (elem.selectedIndex == 3) { 
      document.getElementById("other-div").style.display = 'block'; 
     } else { 
      document.getElementById("other-div").style.display = 'none'; 
     } 
    } 
</script> 

<select id="mySelect" onChange="check(this);"> 
     <option>Choose Your Name</option> 
     <option>Frank</option> 
     <option>George</option> 
     <option>Other</option> 
</select> 
<div id="other-div" style="display:none;"> 
     <label>Enter your Name 
     <input id="other-input"></input> 
     </label> 
</div> 

jsFidle

Как уже говорилось ранее, добавьте OnChange событие, связать его, чтобы функционировать и там процесс, что должно быть отображено и т.д.