Question

我有像这样的选择框

第1行

<form action="" method="POST">
  <select id="showhide">
      <option value="0">-SELECT-</option>
      <option value="1">Show</option>
      <option value="2">Hide</option>
  </select>
  <input id="txtname" type="text" name="txtname" style="display:none;">
</form>

第2行

<form action="" method="POST">
  <select id="showhide">
      <option value="0">-SELECT-</option>
      <option value="1">Show</option>
      <option value="2">Hide</option>
  </select>
  <input id="txtname" type="text" name="txtname" style="display:none;">
</form>

和javascript

$(document).ready(function(){
    $("#showhide").change(function(){
        var valx = $('#showhide').val();
        if(valx == '1'){
            $("#txtname").show();
        }else if(valx == '2'){
            $("#txtname").hide();
        }
    });
});

当我在行1中使用selectbox时，显示/隐藏行1中的输入框工作，但是当我在行2中使用selectbox时，show / hide不像行1那样工作。

如何解决这个问题。

三江源

Answer 1

将id属性替换为name中的select，并从id移除input属性，因为id属性必须是唯一的文档。

<form action="" method="POST">
  <select name="showhide">
      <option value="0">-SELECT-</option>
      <option value="1">Show</option>
      <option value="2">Hide</option>
  </select>
  <input type="text" name="txtname" style="display:none;">
</form>
<form action="" method="POST">
  <select name="showhide">
      <option value="0">-SELECT-</option>
      <option value="1">Show</option>
      <option value="2">Hide</option>
  </select>
  <input type="text" name="txtname" style="display:none;">
</form>

JS：

$(document).ready(function(){
    $("select[name='showhide']").change(function(){
        $(this).siblings('input[name="txtname"]').toggle(this.value == 1);
    });
});

示例：https://jsbin.com/pavijufige/edit?html,js,output

Answer 2

进行此更改。

在当前情况下，使用$(this)获取current context selection

$(document).ready(function() {
        $("select.showhide").change(function() {

        var valx = $(this).val();
        if (valx == '1') {
            $(this).next().show();
        } else if (valx == '2') {
            $(this).next().hide();
        }
    });
});

将类class="showhide"添加到您的选择下拉列表中。 Id应该是唯一的。因此，您不能两次使用相同的ID。

HTML：

<form action="" method="POST">
        <select class="showhide">
            <option value="0">-SELECT-</option>
            <option value="1">Show</option>
            <option value="2">Hide</option>
        </select>
        <input id="txtname" type="text" name="txtname" style="display:none;">
    </form>
    <form action="" method="POST">
        <select class="showhide">
            <option value="0">-SELECT-</option>
            <option value="1">Show</option>
            <option value="2">Hide</option>
        </select>
        <input id="txtname" type="text" name="txtname" style="display:none;">
    </form>

单击多个选择框后显示/隐藏输入文本

2 个答案: