动态列表Select

一、案例：     【动态列表】

二、案例类别：  【页面】

三、案例关键字：【SELECT】 【OPTION】 【ADD】  【REMOVE】

四、案例模型：

       左侧List   >>>>    右侧List

五、案例解释：

       在动态页面中，经常会用到一些左右两侧对应选择，或者我们对于用户的选择不确定，总是需要动态生成一些选项时供用户选择，此时使用该方法。

六、案例代码：

 

for(i=0;i<document.all.user2.length;i++) {

if(document.all.user2.options(i).selected == true) {

var oOption = document.createElement('OPTION');

oOption.text=document.all.user2.options(i).text;

oOption.value=document.all.user2.value;

document.all.user1.add(oOption);

document.all.user2.remove(i);

i--;

}

}

 

此时是从 user1 的select 列表框 向 user2的select 列表框选择

事件可以定义在onclick方法中。

 

七、案例心得及经验总结：

       此时使用select时需要注意是动态的创建立 option这个元素，然后将option这个元素加入到另外一个select列表框中的。同时可以通过remove方法删除掉另外的不用的选项。

 

八、实用案例：对应关系、动态选择

 

九、案例相关方法及拓展方法：

    1、创建option还有以下方法同样可以创建不同的option 并且直接赋进去值。

Sselect2.options[Sselect2.options.length]=new Option("第一期","1");

2、

topArray[3] = new Option('<nobr><img src="img/htmlicon.gif" width=16 height=16 border=0 align="absmiddle"> 显示的代码</nobr>', "/article.php");

[解析] topArray[项目号码] new Option('显示的html代码，可以写上你的项目内容','选择的值')