javascript - JavaScript：隐藏下拉列表中的元素，除了一个

Question

我有这个代码：

$("#country").change(function() {
  if ($(this).data('options') === undefined) {
    $(this).data('options', $('#street option').clone());
  }
  var id = $(this).val();
  $('#street').prop('disabled', false);
  var options = $(this).data('options').filter('[class=' + id + ']');
  $('#street').html(options);
});	

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="country">
	<option  disabled selected>Select ...</option>
	<option value='1'>Country_one</option>
	<option value='2'>Country_two</option>
	<option value='3'>Country_three</option>
	<option value='4'>Country_four</option>
</select>

<select disabled class="js-select2"  name="street" id="street">
	<option disabled selected>Select a Street ...</option>
	<option class='1' value='1'>Street_one</option>
	<option class='1' value='2'>Street_two</option>
	<option class='1' value='3'>Street_three</option>
	<option class='1' value='4'>Street_four</option>
    <option class='2' value='5'>Street_five</option>
	<option class='2' value='6'>Street_six</option>
	<option class='3' value='7'>Street_seven</option>
	<option class='3' value='8'>Street_eight</option>
	<option class='3' value='9'>Street_nine</option>
	<option class='3' value='10'>Street_ten</option>
	<option>Street not found</option>
</select>

我需要从country第二个下拉列表中更改选项时保留该Select a Street ...选项，而当我在第二个下拉列表中选择时Country_four仅显示该选项Street not found

标签： javascriptjqueryhtml

Answer 1

default在您的选择选项“选择一条街道”中添加了一个类，并添加到该类中，.filter()因此它将始终被选中

添加if / else以检查所选值 - 如果它不是 4；重建选项，并启用选择。如果是 4；清空选项，添加“未找到街道”选项，然后禁用选择。在这两个之后，我们选择第一个选项，因此我们总是首先显示正确的消息

$('#country').on('change', function() {
  // Stores the intial Options into a Data-attribute
  if ($(this).data('options') === undefined) {
    $(this).data('options', $('#street option').clone());
  }

  if ($(this).val() !== '4') {
    // Fetches the Options from data, and filters for match & default option
    let id = $(this).val();
    let newOptions = $(this).data('options').filter(`[class="${id}"], [class="default"]`);
    $('#street')
      .empty()
      .append(newOptions)
      .prop('disabled', false)
  } else {
    // Creates an Option, containing only text
    let newOptions = $('<option></option>').text("Street not found");
    $('#street')
      .empty()
      .append(newOptions)
      .prop('disabled', true)
  }
  
  // Selects the first Option in the Select
  $('#street')[0].selectedIndex = 0
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="country">
  <option disabled selected>Select ...</option>
  <option value='1'>Country_one</option>
  <option value='2'>Country_two</option>
  <option value='3'>Country_three</option>
  <option value='4'>Country_four</option>
</select>

<select disabled class="js-select2" name="street" id="street">
  <option class="default" disabled selected>Select a Street ...</option>
  <option class='1' value='1'>Street_one</option>
  <option class='1' value='2'>Street_two</option>
  <option class='1' value='3'>Street_three</option>
  <option class='1' value='4'>Street_four</option>
  <option class='2' value='5'>Street_five</option>
  <option class='2' value='6'>Street_six</option>
  <option class='3' value='7'>Street_seven</option>
  <option class='3' value='8'>Street_eight</option>
  <option class='3' value='9'>Street_nine</option>
  <option class='3' value='10'>Street_ten</option>
  <option>Street not found</option>
</select>