个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 21:50:43 26 4
gpt4 key购买 nike

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

谢谢

最佳答案

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

希望对你有帮助

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>

关于javascript - 将两个相互关联的菜单从静态转换为动态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47406849/

26 4 0
文章推荐： mysql - 通过向现有值sql添加值来更新记录
文章推荐： python - 转换 numpy.ndarray.tolist 时丢失数据类型？
文章推荐： MySQL 排序带前缀的数字
文章推荐： php - 我如何将 array_column 值传递给另一个数组 - PHP