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();

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'}));

Answer 4

这是一种更干净的解决方案：

   $("#fnivel").change(function () {
      if ($(this).val() == '2') {
        $('#fnivel2').attr('pk','1').show();
      } else {
        $("#fnivel2").removeAttr('pk').hide();
      }
    })

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

4 个答案: