在下拉菜单中选择第一个选项作为默认选项

Question

我有几个港口的潮汐表，我可以从第一行“选择位置”的下拉菜单中选择港口。当我更改位置时，它会选择一个 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>

 

如何删除&ldquo;选择位置&rdquo;选项并让下拉菜单显示&ldquo;位置 A&rdquo;并且脚本在网页打开时显示 div class="box A" 的内容？

Answer 1

<select>您可以设置using的初始值val()，并在设置后触发更改事件，这将依次运行更改处理程序。我还简化了更改处理程序逻辑，因为您可以使用选择本身的值，而无需循环遍历<option>元素$('select#location').change(function() {&nbsp; $('.box').hide().filter('.' + this.value).show();&nbsp; // set the value and trigger change on page load}).val('A').change().box {&nbsp; display: none}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp; <select id="location">&nbsp; &nbsp; <option value="">Select Location</option>&nbsp; &nbsp; <option value="A">Location A</option>&nbsp; &nbsp; <option value="B">Location B</option>&nbsp; &nbsp; <option value="C">Location C</option>&nbsp; </select></div><div class="box A">Box A</div><div class="box B">Box B</div><div class="box C">Box C</div>

Answer 2

如果您要从列表中预先选择一个选项，这似乎与首先选择“选择位置”选项相反（从用户体验的角度来看）。话说回来：将属性添加selected到默认情况下应选择的属性option，然后手动调用执行更新的函数。另请注意，option不应被视为有效选项，例如“选择位置”应显式将其value属性设置为""，否则其value隐式成为 的文本内容option。请参阅下面内嵌的 JavaScript 注释。<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp; &nbsp; &nbsp; <select>&nbsp; &nbsp; &nbsp; &nbsp; <option value="">Select Location</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="A" selected>Location A</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="B">Location B</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="C">Location C</option>&nbsp; &nbsp; </select></div>&nbsp;<div class="A">&nbsp; &nbsp; <?php&nbsp;&nbsp; &nbsp; &nbsp; // tide table for location A&nbsp;&nbsp; &nbsp; ?>&nbsp;</div><div class="B">&nbsp; &nbsp; <?php&nbsp;&nbsp; &nbsp; &nbsp; // tide table for location B&nbsp;&nbsp; &nbsp; ?>&nbsp;</div><div class="C">&nbsp; &nbsp; <?php&nbsp;&nbsp; &nbsp; &nbsp; // tide table for location C&nbsp;&nbsp; &nbsp; ?>&nbsp;</div><script>$(document).ready(function(){&nbsp;// Instead of an anonymous function, use a&nbsp;// function declaration so the function can&nbsp;// be called explicitly when needed.&nbsp;function update(){&nbsp; &nbsp; &nbsp; &nbsp; $(this).find("option:selected").each(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var optionValue = $(this).attr("value");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(optionValue){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".box").not("." + optionValue).hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("." + optionValue).show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".box").hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;}&nbsp;$("select").change(update).change();&nbsp;update(); // Update as soon as the page loads.});</script>