Javascript 用于选择国家、州和地区的下拉菜单
我无法设计函数“print_district”从s_b获取值。 请帮助我定义这个多维数组 我想得到c11，c12，c13，。。。从国家/地区1的C1和c21、c22、c23中进行选择时，。。。关于从国家1中选择C2 但是我得到了d11，d12，d13，。。。和d12，d22，23等，它们来自国家2Javascript 用于选择国家、州和地区的下拉菜单,javascript,html,multidimensional-array,Javascript,Html,Multidimensional Array,我无法设计函数“print_district”从s_b获取值。 请帮助我定义这个多维数组 我想得到c11，c12，c13，。。。从国家/地区1的C1和c21、c22、c23中进行选择时，。。。关于从国家1中选择C2 但是我得到了d11，d12，d13，。。。和d12，d22，23等，它们来自国家2 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled D
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type= "text/javascript">
var country_arr = new Array("country 1", "country 2");
var s_a = new Array();
s_a[0]="";
s_a[1]="C1|C2";
s_a[2]="D1|D2";
var s_b = new Array();
s_b[1,1]="c11|c12|c13|c14|c15|c16|c17|c18|c19|c10";
s_b[1,2]="c21|c22|c23|c24|c25|c26|c27|c28|c29|c210";
s_b[2,1]="d11|d12|d13|d14|d15|d16|d17|d18|d19|d10";
s_b[2,2]="d21|d22|d23|d24|d25|d26|d27|d28|d29|d210";
function print_country(country_id){
// given the id of the <select> tag as function argument, it inserts <option> tags
var option_str = document.getElementById(country_id);
option_str.length=0;
option_str.options[0] = new Option('Select Country','');
option_str.selectedIndex = 0;
for (var i=0; i<country_arr.length; i++) {
option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]);
}
}
function print_state(state_id, state_index){
var option_str = document.getElementById(state_id);
option_str.length=0;
option_str.options[0] = new Option('Select State','');
option_str.selectedIndex = 0;
var state_arr = s_a[state_index].split("|");
for (var i=0; i<state_arr.length; i++) {
option_str.options[option_str.length] = new Option(state_arr[i],state_arr[i]);
}
}
//This function is incorrect, just to demonstrate, please help to correct this
function print_district(district_id, district_index){
var option_str = document.getElementById(district_id);
option_str.length=0;
option_str.options[0] = new Option('Select district','');
option_str.selectedIndex = 0;
var district_arr = s_b[district_index].split("|");
for (var i=0; i<district_arr.length; i++) {
option_str.options[option_str.length] = new Option(district_arr[i],district_arr[i]);
}
}
</script>
</head>
<body>
<form>
Select Country: <select onchange="print_state('state',this.selectedIndex);" id="country" name ="country" ></select>
<br />
State: <select onchange="print_district('district',this.selectedIndex);" name ="state" id ="state"></select>
<br />
District <select name ="district" id ="district"></select>
<input type="submit"></form>
<script language="javascript">print_country("country");</script>
</body>
</html>
无标题文件
var country_arr=新数组（“国家1”、“国家2”）；
var s_a=新数组（）；
s_a[0]=“”；
s|a[1]=“C1 | C2”；
s|a[2]=“D1 | D2”；
var s_b=新数组（）；
s|b[1,1]=“c11 | c12 | c13 | c14 | c15 | c16 | c17 | c18 | c19 | c10”；
s|b[1,2]=“c21 | c22 | c23 | c24 | c25 | c26 | c27 | c28 | c29 | c210”；
s|b[2,1]=“d11 | d12 | d13 | d14 | d15 | d16 | d17 | d18 | d19 | d10”；
s|b[2,2]=“d21 | d22 | d23 | d24 | d25 | d26 | d27 | d28 | d29 | d210”；
功能打印国家/地区（国家/地区id）{
//给定标记的id作为函数参数，它将插入标记
var option\u str=document.getElementById（国家/地区id）；
选项长度=0；
option_str.options[0]=新选项（'选择国家'，''）；
选项\u str.selectedIndex=0；
对于（var i=0；i这是上述问题的解决方案
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
var stateObject = {
"Country 1": {
"C1": ["c11", "c12"],
"C2": ["c21", "c22"]
},
"Country 2": {
"D1": ["d11", "d12"],
"D2": ["d21", "d22"]
}
}
window.onload = function () {
var countySel = document.getElementById("countySel"),
stateSel = document.getElementById("stateSel"),
districtSel = document.getElementById("districtSel");
for (var country in stateObject) {
countySel.options[countySel.options.length] = new Option(country, country);
}
countySel.onchange = function () {
stateSel.length = 1; // remove all options bar first
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var state in stateObject[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
countySel.onchange(); // reset in case page is reloaded
stateSel.onchange = function () {
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var district = stateObject[countySel.value][this.value];
for (var i = 0; i < district.length; i++) {
districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
}
}
}
</script>
</head>
<body>
<form name="myform" id="myForm">
Select Country: <select name="state" id="countySel" size="1">
<option value="" selected="selected">Select Country</option>
</select>
<br>
<br>
Select State: <select name="countrya" id="stateSel" size="1">
<option value="" selected="selected">Please select Country first</option>
</select>
<br>
<br>
Select District: <select name="district" id="districtSel" size="1">
<option value="" selected="selected">Please select State first</option>
</select><br>
<input type="submit">
</form>
</body>
</html>
无标题文件
var stateObject={
“国家1”：{
“C1”：[“c11”、“c12”]，
“C2”：[“c21”、“c22”]
},
“国家2”：{
“D1”：[“d11”、“d12”]，
“D2”：[“d21”、“d22”]
}
}
window.onload=函数（）{
var countySel=document.getElementById（“countySel”），
stateSel=document.getElementById（“stateSel”），
districtSel=document.getElementById（“districtSel”）；
for（stateObject中的var国家/地区）{
countySel.options[countySel.options.length]=新选项（国家，国家）；
}
countySel.onchange=函数（）{
stateSel.length=1；//首先删除所有选项栏
districtSel.length=1；//首先删除所有选项栏
如果（this.selectedIndex<1）返回；//完成
for（stateObject[this.value]中的变量状态）{
stateSel.options[stateSel.options.length]=新选项（state，state）；
}
}
countySel.onchange（）；//重新加载页面时重置
stateSel.onchange=函数（）{
districtSel.length=1；//首先删除所有选项栏
如果（this.selectedIndex<1）返回；//完成
var district=stateObject[countySel.value][this.value]；
对于（变量i=0；i
选择状态：
请先选择国家/地区
选择地区：
请先选择州
基于Angular 5的示例，它正在工作。要获取值，请使用表单生成器和表单组
template.html
为什么您的解决方案有效？请添加对代码功能的解释。代码包含注释，请参考，如果仍有疑问，请添加注释，我将使用参考资料详细解释。
<div>
<h2>Hello country/ state/ cities </h2>
<select (change)="countryChange($event)" >
<option>Select</option>
<option *ngFor="let c of countries" [ngValue]="c.country">{{ c.country }}</option>
</select>
<select (change)="statesChange($event)">
<option>Select</option>
<option *ngFor='let state of states' [ngValue]="state.name">{{ state.name }}</option>
</select>
<select >
<option>Select</option>
<option *ngFor='let city of cities' [ngValue]="city">{{ city }}</option>
</select>
</div>
countries= [{
"country": "Afghanistan",
"states": [
{ "name":"Nurestan", "cities":["c1", "c2", "c3"] },
{ "name":"Oruzgan", "cities":["orc1", "oruc2", "oruc3"] },
{ "name":"Panjshir", "cities":["3c1", "3c2", "3c3"] }
]
},
{
"country": "Albania",
"states": [
{ "name": "Korce" , "cities":["c1", "c2", "c3"] },
{ "name": "Kukes", "cities":["orc1", "oruc2", "oruc3"] },
{ "name": "Lezhe","cities":["orc1", "oruc2", "oruc3"]},
{ "name": "Shkoder", "cities":["orc1", "oruc2", "oruc3"]},
{ "name": "Tirane","cities":["orc1", "oruc2", "oruc3"]}
]
},
{
"country": "Antarctica",
"states": []
}
]
states= []; cities = [];
countryChange(e){
console.log(e.target.value)
this.countries.filter(element => {
if(element.country == e.target.value){
console.log(element.states[0],"first state")
this.states = element.states;
}
});
this.cities = []
}
statesChange(evt){
console.log(evt.target.value,this.states)
this.states.filter( element =>{
if(element.name == evt.target.value){
this.cities = element.cities;
}
})
}