JS simple 2-level drop-down box

In the past, server-side controls were used, and data binding and cascade operations were quite casual. Now, we have to consider using client controls, which is a little painful. I have never written much before. Today, I carefully wrote one

Find an example on the Internet and complete it again:

<SCRIPT type = "text/JavaScript">
VaR cityarr = [];
Cityarr ['shanghai'] = [
{TXT: 'kabei', VAL: 'kabei '},
{TXT: 'hangup', VAL: 'hangup '},
{TXT: 'baosshan ', VAL: 'baosshan '},
{TXT: 'xuhui', VAL: 'xuhui '},
{TXT: 'angpu', VAL: 'angpu '},
{TXT: 'hongkou', VAL: 'hongkou '}
];

Cityarr ['jiangsu '] = [
{TXT: 'nanjing', VAL: 'nanjing '},
{TXT: 'wuxi ', VAL: 'wuxi '},
{TXT: 'xuzhou', VAL: 'xuzhou '},
{TXT: 'suzhou', VAL: 'suzhou '},
{TXT: 'nantongg', VAL: 'nantongg '},
{TXT: 'huaiyin', VAL: 'huaiyin '},
{TXT: 'hangzhou', VAL: hangzhou '},
{TXT: 'zhenjiang ', VAL: 'zhenjiang '},
{TXT: 'changzhou', VAL: 'changzhou '}
];

Function setcity (province)
{
Setselectoption ('city', cityarr [province], '-Please select -');
}

Function noneselected (province)
{
Removeoptionsexcept ('city ');
}
</SCRIPT>

<SCRIPT type = "text/JavaScript">
Function setselectoption (selectobj, optionlist, firstoption, selected)
{
If (typeof selectobj! = 'Object ')
{Selectobj = Document. getelementbyid (selectobj )};

// Empty the select
Removeoptions (selectobj );

VaR start = 0;

If (firstoption)
{
Selectobj. Options [0] = New Option (firstoption ,'');
Start ++;
}

VaR Len = optionlist. length;

For (VAR I = 0; I <Len; I ++)
{
Selectobj. Options [start] = new option(optionlistpolici}.txt, optionlist [I]. Val );

If (selected = optionlist [I]. Val)
{
Selectobj. Options [start]. Selected = true;
}
Start ++;
}
}

Function removeoptions (selectobj)
{
If (typeof selectobj! = 'Object ')
{Selectobj = Document. getelementbyid (selectobj );}
// Count the original options
VaR Len = selectobj. Options. length;
For (VAR I = 0; I <Len; I ++)
{
// Remove the current option
Selectobj. Options [0] = NULL;
}
}

Function removeoptionsexcept (selectobj)
{
If (typeof selectobj! = 'Object ')
{Selectobj = Document. getelementbyid (selectobj );}
// Count the original options
VaR Len = selectobj. Options. length;
For (VAR I = 0; I <Len; I ++)
{
// Remove the current option
Selectobj. Options [0] = NULL;
}

Selectobj. Options [0] = New Option ('-Please select -','');

}
</SCRIPT>

 

 

<Form ID = "form1" runat = "server">
<Div>
<Select id = "Province" onclick = "If (this. value! = '') {Setcity (this. Options [This. selectedindex]. Value);} else {noneselected (city)}">
<Option value = "">-Please select-</option>
<Option value = "Jiangsu"> Jiangsu </option>
<Option value = "Shanghai"> Shanghai </option>
</SELECT>

<Select id = "city">
<Option value = "">-Please select-</option>
</SELECT>
</Div>
</Form>

 

It's easy, just like level 3 and Level 4.