使用一个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页面

回答

相关问题