Question

我有两个彼此相关的选择列表。第一个是国家，第二个是自动显示城市这是选择列表：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')

感谢

Answer 1

我改变了将选项插入下拉列表的方式;调整了一些代码;

希望这有帮助

＆＃13;

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

＆＃13;

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

＆＃13;

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

现在当有人选择一个国家我怎么能把这个值放到变量上？当用户选择菜单而没有提交？

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

2 个答案: