Question

我在同一页面上有一个包含国家/地区和国家/地区代码的多个表，它工作正常，当页面加载时触发更改无法正常工作，

如果选择了印度，则应自动选择国家代码加载事件这是我的代码

<table id="country">
      <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 id="country">
      <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>

我的脚本文件

$(document).ready(function(){
        $('table').on('change', '.country', function(){
          $(this).closest('td').parent().find('.country_code').val($(this).val());
        }).trigger('change');
    });

Answer 1

尝试使用window .load()事件，因为它在DOM之后触发，并且已加载了所有HTML。

我已将所有表IDs更改为unique IDs并更改了字段上的names，因此它们不会重复。

以下是代码和底部的代码段：

$( window ).load(function()
{
    // Go through all tables on the page
    $( "table" ).each(function() 
    {
       // make strings like "#currentID .country"
       var thisCountry = "#" + $(this).attr('id').toString() + " .country";
       var thisCountryCode = "#" + $(this).attr('id').toString() + " .country_code";
       // assign the same selected value from country to country_code
       $( thisCountryCode )[0].selectedIndex = $( thisCountry )[0].selectedIndex;
    });
     
     
    // this is your original onchange handler
    $('table').on('change', '.country', function()
    {
       $(this).closest('td').parent().find('.country_code').val($(this).val());
    }).trigger('change');
});

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

<table id="country1">
      <tr>
        <td>
        <select class="country" name="country1">
          <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_code2">
            <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 id="country2">
      <tr>
        <td>
        <select class="country" name="country2">
          <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_code2">
            <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>
    
</body>
</html>

如何在每个父级加载页面时触发更改

1 个答案: