如果选择了选择选项项目，则显示 div。重载问题

Question

您好，我有 HTML 引导代码：

$(document).ready(function() {
  $("#us-state").find('select').change(function() {
    var $val = $(this).val();

    if ($val === 'US') {
      $('.us-state-select').show();
    } else {
      $('.us-state-select').hide();
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="col-sm mb-5  us-state-select">
  <label>USA STATE</label>
  <select name="order_from_address_state" class="form-select">
    <option>Choose country</option>
    <option value="AL" name="<AL>" selected>Alabama</option>
    <option value="AK" name="AK">Arkansas</option>
  </select>
</div>


<div class="col-sm mb-5" id="us-state"><label>Send from country</label>
  <select name="order_from_address_country" class="form-select">
    <option>Send from</option>
    <option value="US" name="US">USA</option>
    <option value="CA" name="CA" selected>Canada</option>
  </select>
</div>

（也可on JSFiddle）

我的问题很简单。 我正在使用 foreach 来显示所有国家和国家，但是...... 检查jsfiddle。 如果选择的国家/地区与美国不同，并且该国家/地区的负载不同，它会显示 div us-state-select，如果您单击不同的国家/地区，它就会消失并按预期工作。 但是我不想在加载页面并且选择与美国不同的国家/地区的情况下显示带有状态的 div。怎么做？ 它在小提琴上很明显，我选择了加拿大，在页面加载时有带有状态的 div，当点击不同的值时，例如：从国家框发送，状态消失，然后它按预期工作。 请问，你能给我一些建议吗？ 我是 jquery 的新手，谢谢。

Answer 1

把你的 JS 改成这样： 页面准备就绪后，我基本上会检查此逻辑，并且我还在您的代码中添加了一些重构以提高可读性

$(document).ready(function() {
const checkValues = () => {
        var value = $("#us-state").find('select').val();
    console.log(value)
    if(value === 'US'){
        $('.us-state-select').show();
    }else{
        $('.us-state-select').hide();
    }
}

        $("#us-state").ready(checkValues);
    $("#us-state").find('select').change(checkValues);
});