javascript - 如果未选中框，则隐藏；如果选中框，且下拉值等于“其他”，则显示

因此，从下拉菜单中选择“其他”将为您提供一个文本框。取消选中该框将隐藏文本框和下拉菜单。

我无法直接编辑html以添加div来将下拉菜单和文本框包装在一起。

即使没有选择“其他”，我仍然遇到的问题是，如果您取消选中该框，然后再将其选中，则会显示“其他”文本框。如果只选择“其他”下拉菜单项，我只希望显示“其他”文本框。

任何帮助将不胜感激 ：）

// hide otherBox
$('#otherBox').hide();

// show OtherBox if other selected
$('#location_dropdown').change(function() {
    $('#otherBox').toggle(this.value == 'Other');
  });

   $('#honor').change(function () {


        if (!this.checked) {
           $('#location_dropdown').hide();
           $('.form label').hide();
             } else {
            $('#location_dropdown').show();
            $('.form label').show();
            $('#otherBox').show();
}
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>

<div class="form">


  <label for="location_dropdown"> Location: </label>


</div>

<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
  <option value="Chicago Center">Chicago Center</option>
  <option value="Columbia">Columbia</option>
  <option value="Lower Manhattan">Lower Manhattan Hospital</option>
  <option  value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">

最佳答案

删除$('#otherBox').show();，并添加下面注释的两行代码：

$('#honor').change(function() {
  if (!this.checked) {
    $('#location_dropdown').hide();
    $('.form label').hide();
    $('#otherBox').hide(); //ADD THIS
  } else {
    $('#location_dropdown').show();
    $('.form label').show();
    $('#otherBox').toggle($('#location_dropdown').val() === 'Other');  //ADD THIS
  }
});

片段：

// hide otherBox
$('#otherBox').hide();

// show OtherBox if other selected
$('#location_dropdown').change(function() {
  $('#otherBox').toggle(this.value == 'Other');
});

$('#honor').change(function() {
  if (!this.checked) {
    $('#location_dropdown').hide();
    $('.form label').hide();
    $('#otherBox').hide();
  } else {
    $('#location_dropdown').show();
    $('.form label').show();
    $('#otherBox').toggle($('#location_dropdown').val() === 'Other');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>

<div class="form">


  <label for="location_dropdown"> Location: </label>


</div>

<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
  <option value="Chicago Center">Chicago Center</option>
  <option value="Columbia">Columbia</option>
  <option value="Lower Manhattan">Lower Manhattan Hospital</option>
  <option  value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">