javascript - 如何使一个下拉菜单不可见或显示:none when the other dropdown is on a certain selection?

Question

我有 2 个下拉菜单 - 一个用于州，一个用于城市。我想这样做，当“州”下拉列表位于默认选定值(--State--)时，“城市”下拉列表甚至不可见。但除此之外，只要您选择任何一个州，下拉框就会出现。

我当前的代码是“城市”选项根据您选择的“州”而变化。由于我不明白的原因，这个 JSFiddle 不起作用，但它在 Brackets 中起作用。 http://jsfiddle.net/a70zjg9p/4/

我只需要帮助实现:

if --State-- (default value) is selected, make City dropdown invisible

在我已有的代码之上编写代码。

$(document).ready(function() {
  var optarray = $("#layout_select").children('option').map(function() {
    return {
      "value": this.value,
      "option": "<option value='" + this.value + "'>" + this.text + "</option>"
    }
  })

  $("#column_select").change(function() {
    $("#layout_select").children('option').remove();
    var addoptarr = [];
    for (i = 0; i < optarray.length; i++) {
      if (optarray[i].value.indexOf($(this).val()) > -1) {
        addoptarr.push(optarray[i].option);
      }
    }
    $("#layout_select").html(addoptarr.join(''))
  }).change();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
  <option selected value="col0">-- State --</option>
  <option value="col1">Alabama</option>
  <option value="col2">Florida</option>
  <option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;">
  <option value="col0">-- City --</option>
  <option value="col1">Montgomery</option>
  <option value="col2">Orlando</option>
  <option value="col3">Dallas</option>
</select>

Answer 1

请参阅下面逻辑中的注释，了解每个步骤的详细信息。

$(document).ready(function() {
  //get the cities and detach them, since state presumably starts
  //as --State--
  var $citySelect = $("#layout_select");
  var $cities = $citySelect.children().detach();

  $("#column_select").on('change', function(e) {
    //remove any cities that were previously re-attached
    $cities.detach();
    
    if (e.target.value === 'col0') {
      //col0 is --State--, hide the cities
      $citySelect.hide();
    } else {
      //find all the cities for the state and re-attach them
      $citySelect.append(
        $cities.filter(function(){ return this.value === e.target.value })
      );
    
      //show the cities
      $citySelect.show();
    }
  }).change();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
  <option selected value="col0">-- State --</option>
  <option value="col1">Alabama</option>
  <option value="col2">Florida</option>
  <option value="col3">Texas</option>
</select>



<select name="layout_select" id="layout_select" style="height:35px;">
  <option value="col0">-- City --</option>
  <option value="col1">Montgomery</option>
  <option value="col2">Orlando</option>
  <option value="col3">Dallas</option>
</select>