当选择选项等于时,jQuery隐藏/显示输入

Question

如果selected选项等于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();