在下拉菜单中选择第一个选项作为默认选项
我有几个港口的潮汐表，我可以从第一行“选择位置”的下拉菜单中选择港口。当我更改位置时，它会选择一个 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
<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> -
蓝山帝景
如果您要从列表中预先选择一个选项，这似乎与首先选择“选择位置”选项相反（从用户体验的角度来看）。话说回来：将属性添加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>
随时随地看视频慕课网APP
PHP