如何在页面加载时运行Javascript

我有以下脚本，如果选择了国家美国，它将显示州选择下拉列表

<script type="text/javascript">

    $(function() {
        $('#country').change(function(){
            $('.state').hide();
            $('#' + $(this).val()).show();
        });
    });

</script>

<div class="large-6 columns">
   <div class="input-wrapper">
      <label>
         Country
         <select name="user_country" id="country">
            <option selected disabled value=''>Select Country</option>
            <option value="USA" <?php if ($_POST['user_country']=="USA") echo "selected"; ?>>United States</option>
            <option value="United Kingdom" <?php if ($_POST['user_country']=="United Kingdom") echo "selected"; ?>>United Kingdom</option>
            <option value="Ireland" <?php if ($_POST['user_country']=="Ireland") echo "selected"; ?>>Ireland</option>
         </select>
      </label>
   </div>
</div>
</div>
<div id="USA" class="state" style="display:none">
   <div class="row">
      <div class="large-6 columns">
         <div class="input-wrapper">
            <label>
               State
               <select name="user_state">
                  <option selected disabled  value=''>Select State</option>
                  <option value="AL" <?php if ($_POST['user_state']=="AL") echo "selected"; ?>>Alabama</option>
                  <option value="AK" <?php if ($_POST['user_state']=="AK") echo "selected"; ?>>Alaska</option>
                  <option value="AZ" <?php if ($_POST['user_state']=="AZ") echo "selected"; ?>>Arizona</option>
               </select>
            </label>
         </div>
      </div>
   </div>
</div>

$（函数（）{
$（'#country'）。更改（函数（）{
$（'.state'）.hide（）；
$（'#'+$（this.val（））.show（）；
});
});
国家
选择国家
>联合王国
>阿拉巴马州
>亚利桑那州

这一切都很好，但如果已经选择了美国，我会尝试让脚本在页面加载时运行

<script type="text/javascript">

    $(function() {
        $('#country').change(function(){
            $('.state').hide();
            $('#' + $(this).val()).show();
        });
    });

</script>

<div class="large-6 columns">
   <div class="input-wrapper">
      <label>
         Country
         <select name="user_country" id="country">
            <option selected disabled value=''>Select Country</option>
            <option value="USA" <?php if ($_POST['user_country']=="USA") echo "selected"; ?>>United States</option>
            <option value="United Kingdom" <?php if ($_POST['user_country']=="United Kingdom") echo "selected"; ?>>United Kingdom</option>
            <option value="Ireland" <?php if ($_POST['user_country']=="Ireland") echo "selected"; ?>>Ireland</option>
         </select>
      </label>
   </div>
</div>
</div>
<div id="USA" class="state" style="display:none">
   <div class="row">
      <div class="large-6 columns">
         <div class="input-wrapper">
            <label>
               State
               <select name="user_state">
                  <option selected disabled  value=''>Select State</option>
                  <option value="AL" <?php if ($_POST['user_state']=="AL") echo "selected"; ?>>Alabama</option>
                  <option value="AK" <?php if ($_POST['user_state']=="AK") echo "selected"; ?>>Alaska</option>
                  <option value="AZ" <?php if ($_POST['user_state']=="AZ") echo "selected"; ?>>Arizona</option>
               </select>
            </label>
         </div>
      </div>
   </div>
</div>

有什么办法可以做到这一点吗

非常感谢,

---

John

您必须明确触发它：

$(function() {
    $('#country').change(function(){
        $('.state').hide();
        $('#' + $(this).val()).show();
    }).trigger('change'); // <----- trigger the event here || or .change();
});

$（函数（）{
$（'#country'）。更改（函数（）{
$（'.state'）.hide（）；
$（'#'+$（this.val（））.show（）；
}).trigger（'change'）；//您必须明确地触发它：

$(function() {
    $('#country').change(function(){
        $('.state').hide();
        $('#' + $(this).val()).show();
    }).trigger('change'); // <----- trigger the event here || or .change();
});

$（函数（）{
$（'#country'）。更改（函数（）{
$（'.state'）.hide（）；
$（'#'+$（this.val（））.show（）；
}).触发（“变更”）//