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
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>$(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" class="d-none">
<input type="text" placeholder="car">
</div>
<div id="bike_text" class="d-none">
<input type="text" placeholder="bike">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script>
</body>
</html>