하나의 html 페이지 드롭 다운 목록을 다른 html 페이지에 사용

Question

주 html5 페이지 (main.html)와 두 개의 다른 html5 페이지 (country.html 및 state.html)가 있습니다.

country.html 페이지에는 아래와 같이 250 개 국가의 드롭 다운 목록이 있습니다.

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

state.html

내가 main.html에있는 모든 국가의 드롭 다운 목록 및 국가 드롭 다운 메뉴에서 선택한 국가의 모든 국가의 또 다른 드롭 다운 목록을 표시해야

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

아래 같은 250 개국의 상태 선택 드롭 다운 목록이 포함되어 있습니다 명부. main.html은 같다

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

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

내가 country.html 및 state.html를 사용하려면 있도록 국가와 국가 드롭 다운 목록 5 회 이상을 보여줄 필요가 있기 때문에

아래. 내가 어떻게 할 수 있니? 어떤 도움이나 단서가 인정됩니다. 미리 감사드립니다.

Answer 1

main.html

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

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

또한이 솔루션을 시도 할 수 있습니다 : -

당신은 자바 스크립트 기능으로 드롭 다운 모두 HTML을 만들 수 있습니다 java-script file(.js)에 있고 페이지에서이 java-script 파일 함수를 호출하십시오 ($(document).ready();).

예 - 자바 스크립트 파일 Demo.js 확인 - pageload에

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

전화 MakeDropDown() 함수 - -

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

설정에 refrence를 귀하의 페이지에

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

드롭 다운 HTML -

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