Question

我想隐藏并显示输入最近的选择

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

我审核你的代码时有很多不一致的地方。

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

另外，我不确定你的目标是什么。当所选选项是其他选项时，是否显示输入？你的代码有点令人困惑。

所以我修复了问题，如果所选选项是“其他”，则按照您的意愿显示输入。（请注意，输入在启动时隐藏，而不是显示）

代码：

<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

Answer 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

希望这有帮助。

$(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>

选择隐藏基数（多个）

3 个答案: