将两个相互关联的菜单从静态转换为动态答案

【问题标题】：Convert two menus related to each other from static to dynamic将两个相互关联的菜单从静态转换为动态
【发布时间】：2018-05-04 13:08:58
【问题描述】：

我有两个相互关联的选择列表。第一个是国家，第二个是自动显示城市这是选择列表：country.php

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

<body>
    <div align="center">
        Select Country (with states):
        <select id="country" name="country"></select>
        <br/>State:
        <select name="state" id="state"></select>
        <br/>
        <script language="javascript">
            populateCountries("country", "state");
            populateCountries("country2");
        </script>
      </div>
</body>

这是java脚本文件：countries.js

// Countries
var country_arr = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Argentina");

// States
var s_a = new Array();
s_a[0] = "";
s_a[1] = "Kabul|Kandahar|Herat|Mazar-i-Sharif|Kunduz|Taloqan|Jalalabad|Puli Khumri";
s_a[2] = "Tiranë|Durrës|Vlorë|Elbasan|Shkodër|Fier|Kamëz|Korçë|Berat|Lushnjë";
s_a[3] = "Algiers|Oran|Constantine|Annaba|Blida|Batna|Djelfa|Sétif|Biskra";
s_a[4] = "Canillo|L'Aldosa|L'Armiana|Bordes d'Envalira|El Forn|Incles|Meritxell|Molleres|Els Plans";                       
s_a[5] = "Ambriz|Andulo|Bailundo|Balombo|Baía Farta|Benguela|Bibala |Bimbe|Biula|Bungo";                                
s_a[6] = "Buenos Aires|Córdoba|Córdoba|Mendoza|La Plata|Tucumán|Mar del Plata|Salta"; 


function populateStates(countryElementId, stateElementId) {

    var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;

    var stateElement = document.getElementById(stateElementId);

    stateElement.length = 0; // Fixed by Julian Woods
    stateElement.options[0] = new Option('Select State', '');
    stateElement.selectedIndex = 0;

    var state_arr = s_a[selectedCountryIndex].split("|");

    for (var i = 0; i < state_arr.length; i++) {
        stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
    }
}

function populateCountries(countryElementId, stateElementId) {
    // given the id of the <select> tag as function argument, it inserts <option> tags
    var countryElement = document.getElementById(countryElementId);
    countryElement.length = 0;
    countryElement.options[0] = new Option('Select Country', '-1');
    countryElement.selectedIndex = 0;
    for (var i = 0; i < country_arr.length; i++) {
        countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]);
    }

    // Assigned all countries. Now assign event listener for the states.

    if (stateElementId) {
        countryElement.onchange = function () {
            populateStates(countryElementId, stateElementId);
        };
    }
}

我可以如何将这个静态选择列表更改为动态？我已经在数据库中输入了这样的数据：

INSERT INTO tbl_city_country (city_name,country_name)
VALUES 
('kabol','Afghanistan')

谢谢

【问题讨论】：

这是一个有效的代码吗？如果可以，请添加一个sn-p；你还想达到什么目的？
是的，它有效，我想将模板从静态更改为动态
在下面查看我的答案，看看这是否是你想要的？
不，我想从数据库中调用它们。我为国家/地区创建了另一个表并创建如下查询：SELECT city_name FROM tbl_countries WHERE country = '$country' - 工作正常，但我不知道如何放入选择菜单！我应该从选择菜单国家/地区创建一个变量，但我不知道如何
我假设你得到的结果是城市列表，在你的代码中有你添加城市的行（如 s_a[0]、s_a[1] 等）.. 获取查询结果并放入它在一个变量中；如果查询结果是数组或对象，则遍历它们并将其添加到城市数组（s_a）；这将工作注意：请注意国家的位置并相应地确保城市的位置

标签： javascript php mysql dynamic

【解决方案1】：

我更改了将选项插入下拉菜单的方式；调整了一些代码；

希望对你有帮助

window.onload = loadScript();

function loadScript() {
var country_arr =["Please Select Country","Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Argentina"];
populateCountries("country", "state");
populateCountries("country2");
// States
var s_a = new Array();
s_a[0] = "Choose a Country";
s_a[1] = "Kabul|Kandahar|Herat|Mazar-i-Sharif|Kunduz|Taloqan|Jalalabad|Puli Khumri";
s_a[2] = "Tiranë|Durrës|Vlorë|Elbasan|Shkodër|Fier|Kamëz|Korçë|Berat|Lushnjë";
s_a[3] = "Algiers|Oran|Constantine|Annaba|Blida|Batna|Djelfa|Sétif|Biskra";
s_a[4] = "Canillo|L'Aldosa|L'Armiana|Bordes d'Envalira|El Forn|Incles|Meritxell|Molleres|Els Plans";                       
s_a[5] = "Ambriz|Andulo|Bailundo|Balombo|Baía Farta|Benguela|Bibala |Bimbe|Biula|Bungo";                                
s_a[6] = "Buenos Aires|Córdoba|Córdoba|Mendoza|La Plata|Tucumán|Mar del Plata|Salta"; 


function populateStates(countryElementId, stateElementId) {

    var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;

    var stateElement = document.getElementById(stateElementId);

    stateElement.length = 0; // Fixed by Julian Woods
    //stateElement.options[0] = new Option('Select State', '');
    stateElement.selectedIndex = 0;

    var state_arr = s_a[selectedCountryIndex].split("|");

    for (var i = 0; i < state_arr.length; i++) {
        var node = document.createElement("option");      
        var textnode = document.createTextNode(state_arr[i]);
        node.appendChild(textnode); 
        document.getElementById("state").appendChild(node); 
    }
}

function populateCountries(countryElementId, stateElementId) {    
    var countryElement = document.getElementById(countryElementId);    
    for (var i = 0; i < country_arr.length; i++) {
        var node = document.createElement("option");      
        var textnode = document.createTextNode(country_arr[i]);
        node.appendChild(textnode);         
        document.getElementById("country").appendChild(node); 
    }

    // Assigned all countries. Now assign event listener for the states.

    if (stateElementId != null) {
        countryElement.onchange = function () {
            populateStates(countryElementId, stateElementId);
        };
    }
}
}

<body>
    <div align="center">
        Select Country (with states):
        <select id="country" name="country"></select>
        <br/>State:
        <select name="state" id="state"></select>
        <br/>
        <script language="javascript">
//            populateCountries("country", "state");
  //          populateCountries("country2");
        </script>
      </div>
</body>

【讨论】：

【解决方案2】：

好的，我可以将国家/地区放入选择列表中：

<?php $query_country = "SELECT country FROM tbl_country"?>
<select name="country">
   <?php do { ?>
<option value="" ><?php echo $row['country']; ?></option>
   <?php } while ($row = mysql_fetch_assoc($country)) ?> 
</select>

现在，当有人选择一个国家/地区时，我如何将该值放入变量中？当用户选择菜单而不提交？

【讨论】：