使用一个 html 页面的下拉列表到另一个 html 页面答案

【问题标题】：using one html page's dropdown list to another html page使用一个 html 页面的下拉列表到另一个 html 页面
【发布时间】：2013-07-15 20:26:23
【问题描述】：

我有一个 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 包含 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。我怎样才能做到这一点？任何帮助或线索表示赞赏。提前致谢。

【问题讨论】：

可以在客户端和服务器端完成。在服务器端执行它比在客户端执行它更简单。

标签： javascript jquery html

【解决方案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();
                });
            });
        });
    });
});

【讨论】：

谢谢，它显示正确，但我需要取两个下拉列表的值来插入数据库。我该如何取值？
我怎样才能得到状态的ID。在这里，您将展示如何捕获国家/地区的 id。
非常感谢。虽然我在你发送之前解决了它，但它正在工作

【解决方案2】：

你也可以试试这个解决方案：-

您可以在java-script file(.js) 上将下拉 html 转换为 java-script 函数，并在页面加载时调用此 java-script 文件函数 ($(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 的引用 -

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

在页面加载时调用 MakeDropDown() 函数 -

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

下拉Html -

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

【讨论】：