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

Question

我有几个港口的潮汐表，我可以从第一行&ldquo;选择位置&rdquo;的下拉菜单中选择港口。当我更改位置时，它会选择一个 div 并仅显示该 div 内的潮汐表，而忽略其他 div。这样做是因为这是通过刷新 div 来刷新数据的唯一方法，而不是在选择新位置时刷新整个网页。它工作正常，但我想打开网页，已经显示位置 A 的名称并显示位置 A 的潮汐表，而不是仅使用&ldquo;选择位置&rdquo;选项打开而不显示其他任何内容。这就是目前的情况 <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() {

  $('.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>

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>

      <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>