我无法设计功能＆＃34; print_district＆＃34;从bath获取值。 请帮我定义这个多维数组。
我想从国家1和c21，c22，c23，......中选择c11，c12，c13，......从国家1选择C2 但我得到的是d11，d12，d13，......和d12，d22,23，所以这是来自国家2
<!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>
提前致谢！
答案 0 :(得分：1)
这是上述问题的解决方案
<!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>
答案 1 :(得分：1)
基于Angular 5的示例正在运行。要获取值，请使用“表单构建器”和“表单组”。
<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;
}
})
}