根據在另一個下拉列表中所做的選擇填充一個下拉列表

Question

在此平台上enter code here是新的（真的是真的），所以請原諒我會犯的任何錯誤。 我正在嘗試制作一份會員資格表，但我堅持如何在一個州內填充城市菜單。 我已經為州（我放入了36個州）和另一個州（盡管其中沒有選項）創建了下拉列表，但不知道如何編寫在一個州創建城市選項的代碼。 我腦子里有很多理論，但我知道它們都會變得緩慢而低效。 一個具體的例子適合我的情況。 提前致謝！

這是我寫的最后一個代碼。 瀏覽器說未定義變量oStatename：

window.onload=initialize;

function initialize(){
var lgafield=document.getElementById("LGA");
var oStatename=[
{"state":"Abia",
  "lga":["Aba North","Aba South","Arochukwu","Bende","Ikwuano","Isiala-Ngwa 
North",
"Isiala-Ngwa South","Isiukwato","Obi 
Ngwa","Ohafia","Osisioma","Ugwunagbo","Ukwa East","Ukwa West",
"Umuahia North","Umuahia South","Umu-Neochi"]},
//there are more
{"state":"Adamawa",
"lga":
["Demsa","Fufore","Ganaye","Gireri","Gombi","Guyuk","Hong","Jada","Lamurde",
"Madagali","Maiha","Mayo-Belwa","Michika","Mubi North","Mubi 
South","Numan","Shelleng","Song",
"Toungo","Yola North","Yola South"]}
]
var sorfield=document.getElementById("SOR");
sorfield.onchange=getLGA;
}

function getLGA(){
var index=document.getElementById("SOR").selectedIndex;
var selectLGAs=oStatename[index].lga;

for(i in oStatename[index].lga){
    lgafield.options= new Option(oStatename[index].lga[i]);
}
}

Answer 1

這是在javascript和html中添加注釋的方法。 此解決方案適用於您的結構，但是還有其他方法可以組織工作得更好的州和城市（我認為）。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script type="text/javascript">

//The dictionary array containing the states and cities
var oStatename=[
{"state":"Abia",
  "lga":["Aba North","Aba South","Arochukwu","Bende","Ikwuano","Isiala-Ngwa North",
"Isiala-Ngwa South","Isiukwato","Obi Ngwa","Ohafia","Osisioma","Ugwunagbo","Ukwa East","Ukwa West",
"Umuahia North","Umuahia South","Umu-Neochi"]},
{"state":"Adamawa",
"lga":
["Demsa","Fufore","Ganaye","Gireri","Gombi","Guyuk","Hong","Jada","Lamurde",
"Madagali","Maiha","Mayo-Belwa","Michika","Mubi North","Mubi South","Numan","Shelleng","Song",
"Toungo","Yola North","Yola South"]}
];

//Function to initialize the options (Populate States and Cities with the cities from 1st state)
window.onload = function(){

    var selState = document.getElementById('selState');//Select State Drop Down List

    //Create all States options
    for(var i = 0; i < oStatename.length; i++)
    {
        createOption(selState, oStatename[i]["state"],oStatename[i]["state"]);//Create State DropDown option
    }

    //Itinialize the 2nd dropdown with cities from 1st state (selected by default)
    configureDropDownLists();

}

//This function populates the city drop down according to the selected state
function configureDropDownLists() {

     var selState = document.getElementById('selState');//Select State Drop Down List
     var selCity = document.getElementById('selCity');// Select City Drop Down List

     selCity.options.length = 0;// reset City Drop Down Options
     for (i = 0; i < oStatename[selState.selectedIndex]["lga"].length; i++) //Create options based on selected state
     {
                createOption(selCity, oStatename[selState.selectedIndex]["lga"][i], oStatename[selState.selectedIndex]["lga"][i]);
     }

}
//Create an option and add it to the drop down list "ddl" with text and value
function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}
</script>
<body>

<!--link onchange to configureDropDownLists() function-->
<select id="selState" onchange="configureDropDownLists()">
</select>

<select id="selCity">
</select>
</body>
</html>

---舊答案---

使用http://geodata.solutions

我在不到一分鍾的時間內為美國各州和城市生成了此代碼。

<input type="hidden" name="country" id="countryId" value="US"/>
<select name="state" class="states order-alpha" id="stateId">
    <option value="">Select State</option>
</select>
<select name="city" class="cities order-alpha" id="cityId">
    <option value="">Select City</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="//geodata.solutions/includes/statecity.js"></script>

Answer 2

希望這會幫助你。 可以使用jQuery完成：

 $(function(){ $('#states').change(function(){ var Alabama = ["Abbeville", "Adamsville", "Addison", "Akron", "Alabaster"]; var Alaska = ["Anchorage", "Fairbanks", "Juneau", "Sitka", "Ketchikan"]; var Arizona = ["Apache Junction", "Avondale", "Benson", "Buckeye", "Bullhead City"]; var Arkansas = ["Little Rock", "Fort Smith", "Fayetteville", "Springdale", "Jonesboro"]; var option = ''; var str = "var SelectedState = " + this.value; eval(str); for (var i=0;i<SelectedState.length;i++){ option += '<option value="'+ SelectedState[i] + '">' + SelectedState[i] + '</option>'; } var Cities = "<select>" + option + "</select>"; $('#citiesDiv').html(''); $('#citiesDiv').append(Cities); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="states"> <option value="Alabama">Alabama</option> <option value="Alaska">Alaska</option> <option value="Arizona">Arizona</option> <option value="Arkansas">Arkansas</option> </select> <div id="citiesDiv"></div>

http://codetomake.com/tools/html/run.php?s=exercise-jquery-select-example-1&f=18

根據在另一個下拉列表中所做的選擇填充一個下拉列表

問題描述

2 個解決方案

解決方案1
0 已采納 2017-07-23 15:01:06

解決方案2
-1 2017-07-23 15:44:42

根據在另一個下拉列表中所做的選擇填充一個下拉列表

問題描述

2 個解決方案

解決方案1 0 已采納 2017-07-23 15:01:06

解決方案2 -1 2017-07-23 15:44:42

解決方案1
0 已采納 2017-07-23 15:01:06

解決方案2
-1 2017-07-23 15:44:42