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 个答案: