2017-12-31 121 views
0

Ich habe eine mehrere Tabelle auf derselben Seite mit Land und Ländercode geladen wird, ist es gut funktioniert, wenn Seite Trigger auf Änderung funktioniert nicht geladen wird,Wie bei Änderung auslösen, wenn seitiges Formular jeden Elternteil

Wenn indien ist Ländercode ausgewählt wird, sollte auf Load-Ereignisse automatisch wählen soll Hier ist mein Code

<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> 

Meine Skriptdatei

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

Ids sollte eindeutig sein mit –

Antwort

0

Versuchen 0 mitEreignis, wie es nach der DOM feuert und alle HTML wurde geladen.

änderte ich alle Tabellen IDs zu unique IDs und verändert auf den Feldern der names als auch, so dass sie nicht duplizieren. Hier

ist der Code und das Snippet an der Unterseite:

$(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>

+0

zu beginnen, wenn wir nicht jquery Auslöser für diese – jvk

+0

Ihre Tabellen 'verwenden können, muss 'haben unterschiedliche' IDs'. Wir durchlaufen dann alle Tabellen und erhalten ihre ID, um ihre Kinder zu identifizieren (die zwei '