隐藏基于 select（多个）

Question

我想隐藏和显示最近的输入 select

script
$(function() {
  var inputToHide = $('div[id=other]');
  $('#showhide]').on('change', function() {
    var selected = $('#other option:selected').val();
    if (selected === "other") {
      $(this).closest('div[id=other]').show();
    } else {
      $(this).closest('div[id=other]').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group">
  <span><i class="fa fa-globe"></i></span>
  <select name="web" class="form-control" id="showhide">
    <option value="" selected="selected">Select ...</option>
    <option value="car">car</option>
    <option value="train">train</option>
    <option value="other">other</option>
  </select>
</div>

Hide this if not "other" selected
<div class="input-group" id="other">
  <span><i class="fa fa-play"></i></span>
  <input type="text" name="other" class="form-control" />
</div>
<br>
<br>
<br>
<br>
<br>
<div class="input-group">
  <span><i class="fa fa-globe"></i></span>
  <select name="web" class="form-control" id="showhide">
    <option value="" selected="selected">Select ...</option>
    <option value="car">car</option>
    <option value="train">train</option>
    <option value="other">other</option>
  </select>
</div>

Hide this if not "other" selected
<div class="input-group" id="other">
  <span><i class="fa fa-play"></i></span>
  <input type="text" name="other" class="form-control" />
</div>
end html

如何操作？

Answer 1

$(function() {
   $('.other').hide();
      $('.showhide').on('change', function() {
   if ($(this).val() == "other") {
          $(this).closest('.section').find('.other').show();
        } else {
          $(this).closest('.section').find('.other').hide();
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="section">
  <div class="input-group">
    <span><i class="fa fa-globe"></i></span>
    <select name="web" class="form-control showhide">
   <option value="" selected="selected">Select ...</option>
   <option value="car">car</option>
   <option value="train">train</option>
   <option value="other">other</option>
    </select>
  </div>
  <div class="input-group other">
    <span><i class="fa fa-play"></i></span>
    <input type="text" name="other" class="form-control" placeholder="first input"/>
  </div>
 </div>
 <br/>
 <br/>
 <br/>
 <div class="section">
  <div class="input-group">
    <span><i class="fa fa-globe"></i></span>
    <select name="web" class="form-control showhide">
   <option value="" selected="selected">Select ...</option>
   <option value="car">car</option>
   <option value="train">train</option>
   <option value="other">other</option>
    </select>
  </div>
      <div class="input-group other">
    <span><i class="fa fa-play"></i></span>
    <input type="text" name="other" class="form-control" placeholder="second input" />
  </div>
    </div>

Answer 2

首先我看到你有标识符问题，你应该在同一个文档中使用唯一的 ids，当你解决这个问题时，你可以改进你的脚本，就像下面的例子一样，它会起作用。

希望对您有所帮助。

$(function() {
    $('body').on('change', '#showhide', function() {
        if ($(this).val() == "other")
            $('#other').show();
        else
            $('#other').hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
  <span><i class="fa fa-globe"></i></span>
  <select name="web" class="form-control" id="showhide">
    <option value="" selected="selected">Select ...</option>
    <option value="car">car</option>
    <option value="train">train</option>
    <option value="other">other</option>
  </select>
</div>

Hide this if not "other" selected
<div class="input-group" id="other">
  <span><i class="fa fa-play"></i></span>
  <input type="text" name="other" class="form-control" />
</div>

Answer 3

我检查你的代码时有很多不连贯的地方。

您多次使用同一个ID。您应该不惜一切代价始终尽量避免这种情况！ read here

另外，我不确定你打算做什么。 Was it to show the input when the selected option is other?你的代码对此有点混乱。

所以我解决了这些问题，并按照您希望在所选选项 "Other" 时显示输入的方式进行操作。（请注意，输入在启动时隐藏，而不是显示）

代码：

<div class="input-group">
  <span><i class="fa fa-globe"></i></span>
  <select name="web" class="form-control showhide">
    <option value="" selected="selected">Select ...</option>
    <option value="car">car</option>
    <option value="train">train</option>
    <option value="other">other</option>
  </select>
</div>
<div class="input-group other">
  <span><i class="fa fa-play"></i></span>
  <input type="text" name="other" class="form-control" />
</div>

<br>

<div class="input-group">
  <span><i class="fa fa-globe"></i></span>
  <select name="web" class="form-control showhide">
    <option value="" selected="selected">Select ...</option>
    <option value="car">car</option>
    <option value="train">train</option>
    <option value="other">other</option>
  </select>
</div>

<div class="input-group other">
  <span><i class="fa fa-play"></i></span>
  <input type="text" name="other" class="form-control" />
</div>

html

$(function() {
  $('.other').hide();
  $('.showhide').change(function() {
    var selected = $(this).find("option:selected").val();
    if (selected === "other") {
      $(this).parent().next(".other").show();
    } else {
      $(this).parent().next(".other").hide();
    }
  });
});

js

jsfiddle

隐藏基于 select（多个）

Hide Base on select (multiple)

javascript

jquery

jquery-selectors