使用一個html頁面的下拉列表到另一個html頁面

我有一個html5主頁面（main.html）和另外兩個html5頁面（country.html和state.html）。使用一個html頁面的下拉列表到另一個html頁面

country.html頁面包含250個國家像下面的選擇下拉列表。

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

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

我都必須表現main.html所有國家的下拉列表，並從國家下拉列表中選擇國家所有國家的另一個下拉列表中250個國家的國家的選擇下拉列表名單。 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。我怎樣才能做到這一點？任何幫助或線索表示讚賞。提前致謝。

來源

2013-07-15 Kabir

可以同時在客戶端和服務器端完成。在服務器端做這件事比在客戶端做更簡單。 – Dilantha

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-15 04:25:11 vladkras

謝謝，它顯示正確，但我需要採取下拉列表的值插入數據庫。我如何看待價值？ – Kabir

我怎樣才能得到狀態的id。在這裏你展示如何趕上國家的身份證。 – Kabir

@Kabir嗨，我更新了我的答案 – vladkras

您也可以嘗試此解決方案： -

可以使雙方下拉HTML到Java腳本函數在java-script file(.js)上，並在頁面加載時調用此Java腳本文件功能（$(document).ready();）。

示例 - 做一個Java的腳本文件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集refrence - 在頁面加載

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

呼叫MakeDropDown（）函數 -

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

下拉的Html -

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

來源

2013-07-15 05:54:02

使用一個html頁面的下拉列表到另一個html頁面

回答

相關問題