0

メインの html5 ページ ( main.html) と 2 つの別の 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以下のような250か国の州の選択ドロップダウンリストが含まれています

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

すべての国main.htmlのドロップダウン リストと、国のドロップダウン リストから選択した国のすべての州の別のドロップダウン リストを表示する必要があります。main.html以下のようなものです

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

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

国と州のドロップダウン リストを 5 回以上表示する必要があるため、 と を使用するのが好きcountry.htmlですstate.html。どうやってやるの？どんな助けや手がかりも大歓迎です。前もって感謝します。

4

2 に答える 2

2

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();
                });
            });
        });
    });
});
于 2013-07-15T04:25:11.037 に答える
0

この解決策を試すこともできます：-

両方のドロップダウン html を java-script 関数にすることができ、java-script file(.js)ページの load( $(document).ready();) でこの java-script ファイル関数を呼び出すことができます。

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

ページに Demo.js の参照を設定 -

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

ページロード時に MakeDropDown() 関数を呼び出す -

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

ドロップダウン HTML -

<select id="PageDropdown"></select>
于 2013-07-15T05:54:02.887 に答える