How to show hide div based on multiple dropdown-CodePudding

I am trying to show hide divs based on multiple dropdown selection.

Here is HTML page

<select id="vehicle">
   <option="bike">Bike</option>
   <option="car">Car</option>
</select>
<select id="electric">
   <option="yes">Yes</option>
   <option="no">no</option>
</select>

<div id="car_text">
   <input type="text">
</div>

<div id="bike_text">
   <input type="text">
</div>

And this is jquery i am trying to make but still fail

$(document).ready(function () 
{
  $("#vehicle, #electric").change(function () 
  {
    $("#vehicle, #electric").find("option:selected").each(function () 
    {
      var vehicleSelect = $("#vehicle").attr("value");
      var electricSelect = $("#electric").attr("value");
      if (vehicleSelect == "car" && electricSelect == "yes") 
      {
        $("#car_text").show();
        $("#bike_text").hide();
      } 
      else 
      {
        $("#car_text").hide();
        $("#bike_text").show();
      }
    });
});

});

Thanks for the help

CodePudding user response：

You can do it like this:

$(document).ready(function() {
  $("#vehicle, #electric").change(function() {
    var vehicleSelect = $("#vehicle").val();
    var electricSelect = $("#electric").val();
    $("#car_text").toggle(vehicleSelect == "car" && electricSelect == "yes")
    $("#bike_text").toggle(vehicleSelect == "bike" && electricSelect == "yes")
  });
});

There is no reason to loop over each option. Second you should use $("#vehicle").val() not $("#vehicle").attr("value")

Demo

$(document).ready(function() {
  $("#vehicle, #electric").change(function() {
    var vehicleSelect = $("#vehicle").val();
    var electricSelect = $("#electric").val();
    $("#car_text").toggle(vehicleSelect == "car" && electricSelect == "yes")
    $("#bike_text").toggle(vehicleSelect == "bike" && electricSelect == "yes")
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="vehicle">
  <option value="bike">Bike</option>
  <option value="car">Car</option>
</select>
<select id="electric">
  <option value="yes">Yes</option>
  <option value="no">no</option>
</select>

<div id="car_text">
  <input type="text" value="car">
</div>

<div id="bike_text">
  <input type="text" value="bike">
</div>

CodePudding user response：

$(document).ready(function() {

  $("#vehicle").change(function() {
    var vehicle = $('#vehicle').find(":selected").val();
    if (vehicle == 'bike') {
      $("#car_text").addClass('d-none');
      $("#bike_text").removeClass('d-none');
    }
    if (vehicle == 'car') {
      $("#bike_text").addClass('d-none');
      $("#car_text").removeClass('d-none');
    }


  });

});

.d-none {
  display: none;
}

<html>

<body>
  <select id="vehicle">
    <option value="bike">Bike</option>
    <option value="car">Car</option>
  </select>
  <select id="electric">
    <option value="yes">Yes</option>
    <option value="no">no</option>
  </select>

  <div id="car_text" >
    <input type="text" placeholder="car">
  </div>

  <div id="bike_text" >
    <input type="text" placeholder="bike">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
  </script>
</body>

</html>