Reputation: 13
When combined like this, it works
<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>thing</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
<script type="text/javascript">
var countrieslist = document.classic.countries
var citieslist = document.classic.cities
var cities = new Array()
cities[0] = ""
cities[1] = ["1.1|gvhj", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2] = ["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3] = ["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4] = ["4.1|4.1"]
function updatecities(selectedcitygroup) {
citieslist.options.length = 0
if (selectedcitygroup > 0) {
for (i = 0; i < cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length] = new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
</script>
But when separated into a .html and .js file, it doesn't. Why?
3lev.html:
<html>
<head>
<meta charset="utf-8"/>
<title>3lev</title>
<script src="3lev.js"></script>
</head>
<body>
<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>thing</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
</body>
</html>
3lev.js:
var countrieslist=document.classic.countries
var citieslist=document.classic.cities
var cities=new Array()
cities[0]=""
cities[1]=["1.1|1.1", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2]=["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3]=["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4]=["4.1|4.1"]
function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
The file is properly linked and the code is directly copied and pasted, so I can't see why wouldn't it work.
I don't know why it keeps making me add details, it's literally all I've got. I've given everything related that I could.
Upvotes: 0
Views: 957
Reputation: 1143
Add the defer attribute to the script tag
<script src="3lev.js" defer></script>
Or you can include the script tag just before the </body>
closing tag intead of putting within head
tag.
</form>
<script src="3lev.js"></script>
</body>
</html>
This will make the browser execute script only after DOM content has been loaded.
Upvotes: 2
Reputation: 574
You need to use window.onload event of the javascript to make sure all the DOM content is loaded before javascript starts executing.
Below is the working code snippet:
window.onload=function(){
countrieslist=document.classic.countries
citieslist=document.classic.cities
};
var countrieslist,citieslist;
var cities=new Array() cities[0]=""
cities[1]=["1.1|1.1", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2]=["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3]=["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4]=["4.1|4.1"];
function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new
Option(cities[selectedcitygroup][i].split("|")[0],
cities[selectedcitygroup][i].split("|")[1])
}
}
}
Upvotes: 0