页面加载时触发select onChange事件失效问题及代码求助

首先得提两个容易忽略的小问题：

• 你的两个表格都用了id="country"，HTML里id是唯一标识，不能重复，建议改成class或者直接去掉重复id，避免后续JS或样式出现奇怪问题。
• 原来脚本里的.trigger('change')是绑定在$('table')上的，这并不会触发每个.country元素的change事件，自然没法自动同步选中的国家代码。

以下是修正后的完整代码：

HTML部分（先修复重复id问题） #

<table class="country-table">
  <tr>
    <td>
      <select class="country" name="country">
        <option value="">--select country--</option>
        <option selected value="1">India</option>
        <option value="2">China</option>
        <option value="3">Japan</option>
        <option value="4">Singapur</option>
      </select>
    </td>
    <td>
      <select class="country_code" name="country_code">
        <option value="">--select code--</option>
        <option value="1">+91</option>
        <option value="2">+86</option>
        <option value="3">+81</option>
        <option value="4">+65</option>
      </select>
    </td>
  </tr>
</table>
<table class="country-table">
  <tr>
    <td>
      <select class="country" name="country">
        <option value="">--select country--</option>
        <option value="1">India</option>
        <option selected value="2">China</option>
        <option value="3">Japan</option>
        <option value="4">Singapur</option>
      </select>
    </td>
    <td>
      <select class="country_code" name="country_code">
        <option value="">--select code--</option>
        <option value="1">+91</option>
        <option value="2">+86</option>
        <option value="3">+81</option>
        <option value="4">+65</option>
      </select>
    </td>
  </tr>
</table>

JS部分（修正加载时的联动逻辑） #

$(document).ready(function(){
  // 绑定change事件，处理切换国家时的代码联动
  $('table.country-table').on('change', '.country', function(){
    const selectedValue = $(this).val();
    $(this).closest('tr').find('.country_code').val(selectedValue);
  });

  // 页面加载时，遍历每个已选中的国家，同步对应的代码
  $('.country').each(function(){
    const selectedValue = $(this).val();
    if(selectedValue){
      $(this).closest('tr').find('.country_code').val(selectedValue);
    }
  });
});

关键修改点说明： #

• 修复重复id：把table的id="country"改成class="country-table"，保证HTML结构合法规范。
• 加载时主动同步：用.each()遍历所有.country元素，检查是否有选中的非空值，一旦发现就直接设置对应行的.country_code的value，这样页面一加载就能看到正确的代码选中状态。
• 优化DOM查找：用closest('tr')代替closest('td').parent()，更直接地定位到当前选择框所在的行，逻辑更清晰易懂。

这样修改后，不仅切换国家时代码能正常联动，页面加载时默认选中的国家也会自动匹配对应的国家代码啦～

内容的提问来源于stack exchange，提问作者jvk