javascript - How to make one dropdown invisible or display:none when the other dropdown is on a certain selection? - Stack Overf

admin管理员组

文章数量:1404458

I have 2 dropdowns - one for state, one for city. I want to make it so that, when the State dropdown is on the default selected value (--State--), the City dropdown is not even visible. But otherwise, as long as you select any of the states, the dropdown box will be there.

My current code is such that the 'City' options change depending on what 'State' you have selected. For reasons I don't understand, this JSFiddle isn't working, but it's working in Brackets. /

I just need help implementing:

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

code on top of the code I already have.

$(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=".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>

I have 2 dropdowns - one for state, one for city. I want to make it so that, when the State dropdown is on the default selected value (--State--), the City dropdown is not even visible. But otherwise, as long as you select any of the states, the dropdown box will be there.

My current code is such that the 'City' options change depending on what 'State' you have selected. For reasons I don't understand, this JSFiddle isn't working, but it's working in Brackets. http://jsfiddle/a70zjg9p/4/

I just need help implementing:

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

code on top of the code I already have.

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

• javascript
• jquery
• html
• dropdown

Share Improve this question Follow edited Jul 25, 2018 at 13:22 Rick 4,12499 gold badges2727 silver badges3737 bronze badges asked Jul 24, 2018 at 20:59 m0am0a 1,01533 gold badges1616 silver badges3333 bronze badges 3

• 2 this.outerHTML would probably be a better way to populate option. – wizzwizz4 Commented Jul 24, 2018 at 21:01
• 1 I don't see anything in your javascript that would make the layout_select not display. I do see logic that empties it of options. – Taplar Commented Jul 24, 2018 at 21:01
• 1 Also, as I've shown in my answer, it is not necessary to re-create the options every time. You can simply detach them and re-attach the ones that you need. This saves you from having to generate elements repeatedly. – Taplar Commented Jul 24, 2018 at 21:16

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

See the ments in the logic below for details on what it is doing at each step.

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

Check the selected value of the first select, if it is equal to col0, then hide the second select, if not, show it.

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

As you can see if (this.value == ...) I'm using this because in the current context (the change trigger of the element), this is equivalent to the element, in this case, the select

Just check the text of the selected option of the select and hide #layout_select if it is equal to "-- State --".

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

if i have understood correctly, when the first option is selected (--State--), then the you need to hide the city dropdown...

in order to do that, you can use the following script:

http://jsfiddle/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./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>

This works

@{
    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>

本文标签：