jQuery的隱藏/顯示輸入時所選擇的選項等於

Question

如果選定的選項是等於2，我想下面的行添加到身體：

<input id="fnivel2" pk="1"/> 

我做到了使用隱藏類。它的工作原理，但我不知道這是否是一個正確的解決辦法：

<script> 
$(document).ready(function(){ 
    $("#fnivel").change(function(){ 
    var selected_option = $('#fnivel').val(); 
    if(selected_option == '2'){ 
     $("#fnivel2").removeClass("hide"); 
     $("#fnivel2").attr('pk','1'); 
    } 
     if(selected_option != '2'){ 
     $("#fnivel2").addClass("hide"); 
     $("#fnivel2").removeAttr('pk'); 
    } 
    }) 
    }); 
    </script> 

<select id="fnivel"> 
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
</select> 
<input id="fnivel2" class="hide" /> 

Answer 1

這是一種選擇，首先是HTML：

<select id="fnivel"> 
<option value="1">one</option> 
<option value="2">two</option> 
<option value="3">three</option> 
</select> 
<input id="fnivel2" hidden="hidden" /> 

中的JavaScript：

$("#fnivel").change(function() { 
    var selected_option = $('#fnivel').val(); 

    if (selected_option === '2') { 
    $('#fnivel2').attr('pk','1').show(); 
    } 
    if (selected_option != '2') { 
    $("#fnivel2").removeAttr('pk').hide(); 
    } 
}) 

這裏有一個JsFiddle例子。

根據您的要求，另一種方法是以編程方式創建輸入控件，例如，

 $('#fnivel2').append('<input id="fnivel2" pk="1"/>').show(); 

Answer 2

這是一個解決方案，以及：

$(document).ready(function() { 
    $("#fnivel").change(function() { 
     var selected_option = $('#fnivel').val(); 
     if (selected_option == '2' && $("#fnivel2").length == 0) { 
      $("#fnivel").after("<input id='fnivel2' pk='1'/>") 
     } 
     if (selected_option != '2') { 
      $("#fnivel2").remove() 
     } 
    }) 
}); 

小提琴：

http://fiddle.jshell.net/prollygeek/4kPk3/

你只如果你想保持輸入值，這很有用。

Answer 3

您可能需要使用 $("#fnivel").after($('input', {id: 'fnivel2', pk: '1'}));

添加的輸入元素