Я хочу, чтобы скрыть и показать вход только ближайший выбор

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

Как это сделать?

1
Jack 17 Дек 2015 в 13:04

3 ответа

Лучший ответ

Было много несоответствий, когда я просматривал ваш код.

Вы используете один и тот же идентификатор несколько раз. Вы должны любой ценой всегда стараться избегать этого! читайте здесь

Кроме того, я не был уверен, что вы хотели сделать. Было ли это, чтобы показать ввод, когда выбранная опция другая? Ваш код был немного запутанным об этом.

Поэтому я исправил проблемы и действовал так, как вы хотели, чтобы входные данные отображались, если выбрана опция «Другое». (обратите внимание, что входы скрыты при запуске, а не показаны)

Код :

<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

1
Community 12 Апр 2017 в 07:31
$(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>
0
Jagadeesh 17 Дек 2015 в 12:31

Сначала я вижу, что у вас есть проблема с идентификаторами, вы должны использовать уникальные 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>
0
Zakaria Acharki 17 Дек 2015 в 10:23