js构造select和oprtion并设置默认选项

js 构造 select 和 oprtion 并设置默认选项

如果是手写 html select ，那么很容易构造出来默认选中的选项，方法是：

<option value=’beiing’ selected > 北京 </option>

 

如果是 struts 的 select:option 标签，那么有 value 可以控制默认选中的标签，方法：

< html:select property = "compId" styleClass = "formclass" style = "width:80%" value = "xxx " >

 

如果是自己用 js 构造的 select ，那么 Option 默认选中的选项不太好用。看了看 Option 的源码，好像是标准还不支持，源码居然只处理 4 个参数中的前两个： function Option( text, value , defaultSelected, selected){};

对 defaultSelected, selected 两个参数不管。

而 select 中的 selected 和 value 也不管用。

this .orderCreateModeSelect. selected = "3" ; //lijg 3:auto// 不可行

this .orderCreateModeSelect. value = "3" ; //lijg 3:auto// 不可行

因此只能用循环来处理了，方法：

/**

    params: selectUi, selectedValue

    result: if the selectedValue is not single, then select the first one.

    author: lijg 2009-10-10

*/

Toolkit.selectItem = function (selectUi, selectedValue) {

    if (selectUi == null || selectedValue == null ) return ;

    for ( var i = 0; i< selectUi.options.length; i++) {

       if (selectUi.options[i].value == selectedValue) {

           selectUi.options[i].selected = true ; // 可行

           //this.orderCreateModeSelect.selectedIndex = i;// 可行

           break ;

       }

    }

}

在需要的地方调用此方法：

Toolkit.selectItem( this .orderCreateModeSelect, "3" ); //set default we need

 

附注：

Struts html:select 标签显示默认选项

（ 1 ） http://www.iteye.com/topic/36716

最近在写一个系统中，有一个有下拉列表的修改资料功能，对 Struts 的 html:select 进行了运用。

其中怎么样使进入修改页面之后，该下拉列表里的数据是该需要修改的数据列的数据字段，也就是使 html:select 中显示的值默认对应数据库中的值。测试修改了一个下午，总得不出结果，最后还是看了 Struts 的 examples 才算是弄出来了

< html:select property = "id" >

    <!-- 这里一定不能再用 vlue 属性了，只用一个 property 就可以了 -->

    < c:forEach var = "row" item = "${rs.rows}" >

       < html:option value = "row.id" >

           < c:out value = "row.name" />

       </ html:option >

    </ c:forEach >

</ html:select >

总结：在使用 Struts 进行修改功能时，要在修改页面上取的数据库先前的值。只要在 form 中 reset 里取得数据库里的值，然后在前台页面里 html:form 里对应的项设置其 property 为 form 中对应的属性值就好了，而不需要再设置 value 属性了。

（ 2 ）如果运用了 < html:options> 标签，默认选项在 value 处标明

< html:select property = "compId" styleClass = "formclass" style = "width:80%" value = "xxx " >

< html:options collection = "compList" property = "deptId" labelProperty = "deptName" />

</ html:select >