我有幾個港口的潮汐表，我可以從第一行“選擇位置”的下拉菜單中選擇港口。當我更改位置時，它會選擇一個 div 并僅顯示該 div 內的潮汐表，而忽略其他 div。這樣做是因為這是通過刷新 div 來刷新數據的唯一方法，而不是在選擇新位置時刷新整個網頁。它工作正常，但我想打開網頁，已經顯示位置 A 的名稱并顯示位置 A 的潮汐表，而不是僅使用“選擇位置”選項打開而不顯示其他任何內容。這就是目前的情況?<div>? ? ? <select>? ? ? ? <option>Select Location</option>? ? ? ? <option value="A">Location A</option>? ? ? ? <option value="B">Location B</option>? ? ? ? <option value="C">Location C</option>? ? </select></div>?<div class="box A">? ? <?php?? ? ? // tide table for location A?? ? ?>?</div><div class="box B">? ? <?php?? ? ? // tide table for location B?? ? ?>?</div><div class="box C">? ? <?php?? ? ? // tide table for location C?? ? ?>?</div><script>$(document).ready(function(){? ? $("select").change(function(){? ? ? ? $(this).find("option:selected").each(function(){? ? ? ? ? ? var optionValue = $(this).attr("value");? ? ? ? ? ? if(optionValue){? ? ? ? ? ? ? ? $(".box").not("." + optionValue).hide();? ? ? ? ? ? ? ? $("." + optionValue).show();? ? ? ? ? ? } else{? ? ? ? ? ? ? ? $(".box").hide();? ? ? ? ? ? }? ? ? ? });? ? }).change();});</script>?如何刪除“選擇位置”選項并讓下拉菜單顯示“位置 A”并且腳本在網頁打開時顯示 div class="box A" 的內容？
2 回答
holdtom
TA貢獻1805條經驗 獲得超10個贊
<select>您可以設置using的初始值val()，并在設置后觸發更改事件，這將依次運行更改處理程序。
我還簡化了更改處理程序邏輯，因為您可以使用選擇本身的值，而無需循環遍歷<option>元素
$('select#location').change(function() {
$('.box').hide().filter('.' + this.value).show();
// set the value and trigger change on page load
}).val('A').change()
.box {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select id="location">
<option value="">Select Location</option>
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">Box A</div>
<div class="box B">Box B</div>
<div class="box C">Box C</div>
藍山帝景
TA貢獻1843條經驗 獲得超7個贊
如果您要從列表中預先選擇一個選項，這似乎與首先選擇“選擇位置”選項相反（從用戶體驗的角度來看）。
話說回來：
將屬性添加selected到默認情況下應選擇的屬性option，然后手動調用執行更新的函數。另請注意，option不應被視為有效選項，例如“選擇位置”應顯式將其value屬性設置為""，否則其value隱式成為 的文本內容option。
請參閱下面內嵌的 JavaScript 注釋。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select>
<option value="">Select Location</option>
<option value="A" selected>Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="A">
<?php
// tide table for location A
?>
</div>
<div class="B">
<?php
// tide table for location B
?>
</div>
<div class="C">
<?php
// tide table for location C
?>
</div>
<script>
$(document).ready(function(){
// Instead of an anonymous function, use a
// function declaration so the function can
// be called explicitly when needed.
function update(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}
$("select").change(update).change();
update(); // Update as soon as the page loads.
});
</script>
- 2 回答
- 0 關注
- 197 瀏覽
添加回答
舉報
0/150
提交
取消