удаление элементов списка SELECT
Доброго времени суток. Задача: при выборе значения из первого списка загрузить данные во второй список. В функции bindSelects() я произвожу очистку старых данных для загрузки новых, вот етот кусок кода работает не верно. Помогите плззз. Что я делаю не так?
Код (файл selectBox.js):
// JavaScript Document
function country(id, name)
{
this.id = id;
this.name = name;
this.childs = new Array();
this.push = function(cityObj)
{
cObj = new Array(cityObj);
this.childs = this.childs.concat(cObj);
}
this.get = function()
{
return this.childs;
}
}
function city(id,name)
{
this.id = id;
this.name = name;
}
function countriesStack()
{
this.stack = new Array();
this.push = function(countryObj)
{
cObj = new Array(countryObj);
this.stack = this.stack.concat(cObj);
}
this.find = function(country_id)
{
for(var i = 0; i < this.stack.length; i++)
{
if(this.stack.id == country_id)
{
return this.stack;
}
}
return null;
}
this.debug = function()
{
for(var c in this.stack)
{
alert(this.stack[c].constructor + " " + this.stack[c].id + " " + this.stack[c].name);
}
}
}
// sel1_id,sel2_id, countriesStackObj
sel1_id = "select1";
sel2_id = "select2";
countriesStackObj = null;
function bindSelects()
{
this.id1 = sel1_id;
this.id2 = sel2_id;
this.sel1 = document.getElementById(this.id1);
this.sel2 = document.getElementById(this.id2);
if(this.sel2.options.length)
{
for(var i=0; i < this.sel2.options.length; i++)
{
this.sel2.removeChild(this.sel2.options[0]);
}
}
real_id = this.sel1.options[this.sel1.selectedIndex].value;
country = countriesStackObj.find(real_id);
//countries.debug();
cities = country.get();
for(var city in cities)
{
opt = document.createElement("OPTION");
opt.text = cities[city].name;
opt.value = cities[city].id;
this.sel2.options.add(opt);
}
}
function addEventChange()
{
sel1 = document.getElementById(sel1_id);
if(window.addEventListener)
{
sel1.addEventListener("change", bindSelects, false);
}
else {
if(window.attachEvent)
{
sel1.attachEvent("onchange", bindSelects);
}
else {
sel1.onchange = bindSelects;
}
}
}
c1 = new city(1,'Rostov');
c2 = new city(2,'Moscow');
c3 = new city(3,'Taganrog');
c4 = new city(4,'Samara');
c5 = new city(5,'Minsk');
c6 = new city(6,'Vitebsk');
c7 = new city(7,'Gomel');
c8 = new city(8,'Bobruisk');
cc1 = new country(1,'Russia');
cc1.push(c1);
cc1.push(c2);
cc1.push(c3);
cc1.push(c4);
cc2 = new country(2,'Belarus');
cc2.push(c5);
cc2.push(c6);
cc2.push(c7);
cc2.push(c8);
countriesStackObj = new countriesStack();
countriesStackObj.push(cc1);
countriesStackObj.push(cc2);
код (файл selectBox.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="javascript" src="selectBox.js"> </script>
</head>
<body>
<select name="country" id="select1">
<option value="1">Russia</option>
<option value="2">Belarus</option>
</select>
<select name="city" id="select2"> </select>
<script language="javascript">
if(window.addEventListener)
{
window.addEventListener("load", addEventChange, false);
}
else {
if(window.attachEvent)
{
window.attachEvent("onload", addEventChange);
}
else {
window.onload = addEventChange;
}
}
</script>
</body>
</html>
Код (файл selectBox.js):
// JavaScript Document
function country(id, name)
{
this.id = id;
this.name = name;
this.childs = new Array();
this.push = function(cityObj)
{
cObj = new Array(cityObj);
this.childs = this.childs.concat(cObj);
}
this.get = function()
{
return this.childs;
}
}
function city(id,name)
{
this.id = id;
this.name = name;
}
function countriesStack()
{
this.stack = new Array();
this.push = function(countryObj)
{
cObj = new Array(countryObj);
this.stack = this.stack.concat(cObj);
}
this.find = function(country_id)
{
for(var i = 0; i < this.stack.length; i++)
{
if(this.stack.id == country_id)
{
return this.stack;
}
}
return null;
}
this.debug = function()
{
for(var c in this.stack)
{
alert(this.stack[c].constructor + " " + this.stack[c].id + " " + this.stack[c].name);
}
}
}
// sel1_id,sel2_id, countriesStackObj
sel1_id = "select1";
sel2_id = "select2";
countriesStackObj = null;
function bindSelects()
{
this.id1 = sel1_id;
this.id2 = sel2_id;
this.sel1 = document.getElementById(this.id1);
this.sel2 = document.getElementById(this.id2);
if(this.sel2.options.length)
{
for(var i=0; i < this.sel2.options.length; i++)
{
this.sel2.removeChild(this.sel2.options[0]);
}
}
real_id = this.sel1.options[this.sel1.selectedIndex].value;
country = countriesStackObj.find(real_id);
//countries.debug();
cities = country.get();
for(var city in cities)
{
opt = document.createElement("OPTION");
opt.text = cities[city].name;
opt.value = cities[city].id;
this.sel2.options.add(opt);
}
}
function addEventChange()
{
sel1 = document.getElementById(sel1_id);
if(window.addEventListener)
{
sel1.addEventListener("change", bindSelects, false);
}
else {
if(window.attachEvent)
{
sel1.attachEvent("onchange", bindSelects);
}
else {
sel1.onchange = bindSelects;
}
}
}
c1 = new city(1,'Rostov');
c2 = new city(2,'Moscow');
c3 = new city(3,'Taganrog');
c4 = new city(4,'Samara');
c5 = new city(5,'Minsk');
c6 = new city(6,'Vitebsk');
c7 = new city(7,'Gomel');
c8 = new city(8,'Bobruisk');
cc1 = new country(1,'Russia');
cc1.push(c1);
cc1.push(c2);
cc1.push(c3);
cc1.push(c4);
cc2 = new country(2,'Belarus');
cc2.push(c5);
cc2.push(c6);
cc2.push(c7);
cc2.push(c8);
countriesStackObj = new countriesStack();
countriesStackObj.push(cc1);
countriesStackObj.push(cc2);
код (файл selectBox.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="javascript" src="selectBox.js"> </script>
</head>
<body>
<select name="country" id="select1">
<option value="1">Russia</option>
<option value="2">Belarus</option>
</select>
<select name="city" id="select2"> </select>
<script language="javascript">
if(window.addEventListener)
{
window.addEventListener("load", addEventChange, false);
}
else {
if(window.attachEvent)
{
window.attachEvent("onload", addEventChange);
}
else {
window.onload = addEventChange;
}
}
</script>
</body>
</html>
Разобрался в чем дело:
вместо:
for(var i=0; i < this.sel2.options.length; i++)
{
this.sel2.removeChild(this.sel2.options[0]);
}
сделал так:
len = this.sel2.options.length;
for(var i=0; i < len; i++)
{
this.sel2.removeChild(this.sel2.options[0]);
}
т е в цикле при каждой итерации граничные условия высчитываются, а не один раз при первом проходе цикла.
вместо:
for(var i=0; i < this.sel2.options.length; i++)
{
this.sel2.removeChild(this.sel2.options[0]);
}
сделал так:
len = this.sel2.options.length;
for(var i=0; i < len; i++)
{
this.sel2.removeChild(this.sel2.options[0]);
}
т е в цикле при каждой итерации граничные условия высчитываются, а не один раз при первом проходе цикла.