JS 创建 下拉列表

<select> 的子项 <option> 可以直接写死在 JSP 页面中，也可以通过 JS 来创建，当页面加载时填充；当遇到多级下拉列表有相互关联的时候，也就是说一个下拉列表选中某值，要求另外一个下拉列表加载不同值，这时候就需要创建 <option>。

举例：

要求选择不同省份的一级下拉列表，另外一个二级下拉列表出现每个省份对应的城市。

代码:

----------------------------------------------------------------------------------------------

JSP:

<select id="province" name="province" onchange="setCityOption(this, 'city');">

</select>

<select id="city" name="city">

</select>

----------------------------------------------------------------------------------------------

JS:

(1) onload="init();"

init = function(){

//页面加载来创建 province 的子项

//数组第一位设为提交值 value, 第二位设为显示值 text

var provinceList = new Array();

provinceList[0] = [1, '四川']；

provinceList[1] = [2, '山东']；

provinceList[2] = [3, '福建']；

createSelectOption(provinceList, "province");

}

(2) 设置一个下拉列表的子项

createSelectOption = function(_array, _selectID){

var p = document.getElementById(_selectID);

//清空这个下拉列表值

p.innerHTML = '';

p.options.length = 0;

//先创建一个“---请选择---”的子项

var optionTemp = document.createElement('option');

optionTemp.value = "0";

//注意：显示值没有用 optionTemp.text = "---请选择---";因为在 IE（我用的IE7） 下无法显示，其他浏览器正常，暂时不知道为什么，只是这样处理。

optionTemp.innerHTML = "---请选择---";

p.appendChild(optionTemp);

//数组循环加载子项 <option>

for(var i = 0; i < _array.length; i ++)

{

var option = document.createElement('option');

option.value = _array[0];

option.innerHTML = _array[1];

// option.text = _array[1];

p.appendChild(option);

}

}

(3)

setCityOption = function(_select, cityID){

//四川

var sc = new Array();

sc[0] = [1, '成都'];

sc[1] = [2, '自贡'];

sc[2] = [3, '攀枝花'];

sc[3] = [4, '泸州'];

sc[4] = [5, '德阳'];

sc[5] = [6, '绵阳'];

sc[6] = [7, '广元'];

sc[7] = [8, '遂宁'];

sc[8] = [9, '内江'];

sc[9] = [10, '乐山'];

sc[10] = [11, '南充'];

sc[11] = [12, '宜宾'];

sc[12] = [13, '广安'];

sc[13] = [14, '达州'];

sc[14] = [15, '眉山'];

sc[15] = [16, '雅安'];

sc[16] = [17, '巴中'];

sc[17] = [18, '资阳'];

sc[18] = [19, '阿坝'];

sc[19] = [20, '甘孜'];

sc[20] = [21, '凉山'];

//山东

var sd = new Array();

sd[0] = [1, '济南'];

sd[1] = [2, '青岛'];

sd[2] = [3, '淄博'];

sd[3] = [4, '枣庄'];

sd[4] = [5, '东营'];

sd[5] = [6, '烟台'];

sd[6] = [7, '潍坊'];

sd[7] = [8, '威海'];

sd[8] = [9, '济宁'];

sd[9] = [10, '泰安'];

sd[10] = [11, '日照'];

sd[11] = [12, '莱芜'];

sd[12] = [13, '临沂'];

sd[13] = [14, '德州'];

sd[14] = [15, '聊城'];

sd[15] = [16, '滨州'];

sd[16] = [17, '菏泽'];

//福建

var fj = new Array();

fj[0] = [1, '福州'];

fj[1] = [2, '厦门'];

fj[2] = [3, '莆田'];

fj[3] = [4, '三明'];

fj[4] = [5, '泉州'];

fj[5] = [6, '漳州'];

fj[6] = [7, '南平'];

fj[7] = [8, '龙岩'];

fj[8] = [9, '宁德'];

switch(_select.value)

{

case '1':

createSelectOption(sc, cityID);

break;

case '2':

createSelectOption(sd, cityID);

break;

case '3':

createSelectOption(fj, cityID);

break;

default:

break;

}

}