如何使一个下拉列表不可见或显示：当另一个下拉列表位于某个选择时？答案

【问题标题】：How to make one dropdown invisible or display:none when the other dropdown is on a certain selection?如何使一个下拉列表不可见或显示：当另一个下拉列表位于某个选择时？
【发布时间】：2018-07-24 20:59:17
【问题描述】：

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

我当前的代码是这样的，“城市”选项会根据您选择的“州”而改变。由于我不明白的原因，这个 JSFiddle 不起作用，但它在括号中工作。 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>

【问题讨论】：

this.outerHTML 可能是填充option 的更好方法。
我在您的 javascript 中看不到任何会使 layout_select 不显示的内容。我确实看到了清空选项的逻辑。
另外，正如我在回答中所展示的，没有必要每次都重新创建选项。您可以简单地分离它们并重新连接您需要的那些。这使您不必重复生成元素。

标签： javascript jquery html dropdown

【解决方案1】：

请参阅下面逻辑中的 cmets，了解它在每个步骤中所做的详细信息。

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

【讨论】：

【解决方案2】：

检查第一个select的选中值，如果等于col0，则隐藏第二个select，如果不是，则显示。

$(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() {            
            var addoptarr = [];
            var citySelect = $("#layout_select");
            for (i = 0; i < optarray.length; i++) {
                if (optarray[i].value.indexOf($(this).val()) > -1) {
                    addoptarr.push(optarray[i].option);
                }
            }
            citySelect.html(addoptarr.join(''))

            //CHECK IF IS EQUAL TO 'col0'
            if (this.value == "col0"){
              citySelect.hide();
            }else{
              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; display: none">
        <option value="col0">-- City --</option>    
        <option value="col1">Montgomery</option>
        <option value="col2">Orlando</option>
        <option value="col3">Dallas</option>
    </select>

如您所见if (this.value == ...) 我使用this 因为在当前上下文中（元素的change 触发器），this 等价于元素，在这种情况下，select

【讨论】：

【解决方案3】：

只检查select的选中选项的文本，如果等于"-- State --"则隐藏#layout_select。

$(document).ready(function() {
        var optarray = $("#layout_select").children('option').map(function() {
            return {
                "value": this.value,
                "option": "<option value='" + this.value + "'>" + this.text + "</option>"
            }
        })
         $('#layout_select').hide();
        $("#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(''));
            if($('#column_select').find(":selected").text()=="-- State --"){
        $('#layout_select').hide();
     } else {
       $('#layout_select').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>

【讨论】：

【解决方案4】：

如果我已经正确理解，选择第一个选项（--state--），那么您需要隐藏城市下拉...

为此，您可以使用以下脚本：

http://jsfiddle.net/a70zjg9p/10/

$(document).ready(function() {
  var $state = $("#column_select"),
    $city = $("#layout_select");

  $city.hide();

  $state.on('change', function() {
    if ($(this).val() == "col0") {
      $city.hide();
    } else {
      $city.show();
    }
  });

})

<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;display:none">
  <option value="col0">-- City --</option>
  <option value="col1">Montgomery</option>
  <option value="col2">Orlando</option>
  <option value="col3">Dallas</option>
</select>

【讨论】：

【解决方案5】：

这行得通

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut114</title>
    <style type="text/css">
        .Hide {
            visibility: hidden;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(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 () {
                if ($('#column_select option:selected').text() != "-- State --") {
                    $("#layout_select").removeClass("Hide");

                    $("#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(''))
                }
                else {
                    $("#layout_select").addClass("Hide");
                }
            }).change();
        })
    </script>
</head>
<body>
    <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>
</body>
</html>

【讨论】：