我正在嘗試基于多個下拉選擇顯示隱藏 div。
這是HTML頁面
<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>
這是我正在嘗試制作但仍然失敗的jquery
$(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();
}
});
});
});
謝謝您的幫助
uj5u.com熱心網友回復：
你可以這樣做：
$(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")
});
});
沒有理由遍歷每個選項。其次你不應該$("#vehicle").val()使用$("#vehicle").attr("value")
演示
顯示代碼片段
$(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>uj5u.com熱心網友回復：
$(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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/425074.html
標籤：javascript html jQuery
下一篇：為什么頁面重新加載時彈出