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

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 个解决方案

解决方案1
0 已采纳 2017-12-31 18:59:36

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-12-31 18:59:36

解决方案1
0 已采纳 2017-12-31 18:59:36