en utilisant la liste déroulante d'une page html à une autre page html

Question

J'ai une page principale html5 (main.html) et deux autres pages html5 (country.html et state.html).

country.html La page contient une liste déroulante de sélection de 250 pays comme ci-dessous.

<select> 
    <option value="1">Afghanistan</option> 
    <option value="2">Albania</option> 
    ..... 
    <option value="1">Canary Islands</option> 
</select> 

state.html contient sélectionnez la liste déroulante des états de 250 pays comme ci-dessous

<select id="1"> 
    <option value="1">Badakhshan</option> 
    <option value="1">Badghis</option> 
    ............ 
    <option value="32">Zabol</option> 
</select> 

<select id="2"> 
    <option value="33">Badakhshan</option> 
    <option value="34">Badghis</option> 
    ............ 
    <option value="68">Vlore</option> 
</select> 

............... 
<select id="250"> 
    <option value="4902">Saba</option> 
    <option value="4903">Sint Eustatius</option> 
    ............ 
    <option value="4915">Western Equatoria</option> 
</select> 

Je dois montrer la liste déroulante de tous les pays main.html et une autre liste déroulante de tous les états du pays sélectionné dans la liste déroulante de pays liste. main.html est comme ci-dessous

<select id="country"> 
    like to add from country.html 
</select> 

<select id="state> 
    like to add from state.html 
</select> 

Comme il est nécessaire de montrer pays et liste déroulante état plus de 5 fois donc j'aime utiliser country.html et state.html. Comment puis je faire ça? Toute aide ou indice est apprécié. Merci d'avance.

Answer 1

main.html

<div id="countries"></div> 
<div id="states"></div> 

scripts jQuery

$(document).ready(function() { 
    // load select code from country.html 
    $('#countries').load('country.html select', function() { 
     // when country is selected 
     $('#countries select').change(function() { 
      // get id 
      var countryId = $(this).children('option:selected').val(); 
      // load select code from state.html by id 
      $('#states').load('state.html #'+countryId, function() { 
       $('#states select').change(function() { 
        // use the same method to get state id 
        var stateId = $(this).children('option:selected').val(); 
       }); 
      }); 
     }); 
    }); 
}); 

Answer 2

Vous pouvez également essayer cette solution: -

Vous pouvez faire à la fois html déroulant dans une fonction java-script sur un java-script file(.js) et appelez cette fonction de fichier java-script sur le chargement de la page ($(document).ready();).

Exemple - Faire un fichier java-script Demo.js -

function MakeDropDown() { 
    var DropDownHtml = ""; 
    DropDownHtml = "<select><option value='1'>Afghanistan</option><option value='2'>Albania</option><option value='1'>Canary Islands</option></select>"; 
    return DropDownHtml;  
    } 

Set refrence de Demo.js sur vos pages -

<script src="Demo.js" type="text/javascript"></script> 

Appel de la fonction MakeDropDown() sur pageload -

$(document).ready(function() { 
    alert(MakeDropDown()); 
    $('#PageDropdown').html(MakeDropDown()); 
}); 

Dropt-down Html -

<select id="PageDropdown"></select>