html:select标签用法

苦恼人的偷笑

来源：http://hi.baidu.com/gddennis/blog/item/eab0f3093d3cc99d0a7b8292.html <html:select property="if_end"> <option value="0">否</option> <option value="1">是</option> </html:select> 将option中value的值给if_end 动态用法一： <html:select property="personnelId"> <htmlption value="">请选择</htmlption> <htmlptions collection="personList" property="personId" labelProperty="personName"/> </html:select> 代码解释： <html:select property="personnelId"> ： 该部分代码最终返回的值存储在personnelId变量中； <htmlption value="">请选择</htmlption> 默认选项，值为空，为了满足用户不想选择任何选项的需求； <htmlptions collection="personList" property="personId" labelProperty = "personName"/> ： <htmlptions>标签会自动根据参数产生多个<option>。其中，collection属性指的是待迭代的集合变量，property设定的是该<option>的value，labelProperty设定的是页面看到的内容。 注：personList必须是Collection类型的，而且封装的是一个包含personId，personName属性的对象。 动态用法二： 有时候用标签的限制太多就用下面这个： <SELECT name="deid"> <logic:present name="departarray1"> <logic:iterate id="depart" name="departarray1"> <option value="<bean:write name="depart" property="deId"/>"> <bean:write name="depart" property="deName"/> </option> </logic:iterate> </logic:present> </SELECT> 代码解释： <logic:present name="departarray1"> ： 判断是否存在departarray1对象，如果存在的话，就执行嵌套标签之中的内容，如果不存在就跳过。 <logic:iterate id="depart" name="departarray1"> ： 从departarray1集合对象中取出一个对象，并存入对象变量depart中。注：此处的departarray1必须是一个集合类型变量。depart相当于一个局部变量，是用来存储每次取出来的对象的。 <option value="<bean:write name="depart" property="deId"/>"> ： 每一个<option>元素选项的value都是<bean:write name="depart" property="deId"/>，含义是depart对象的deID属性值。 <bean:write name="depart" property="deName"/> ： 这是每一个<option>元素在浏览器上的显示，道标depart对象的deName属性值。 你可以在页面里面定义一个变量，然后动态改变这个变量，在函数里面判断这个变量的值后，再设置selected，如： form1.myselected.options.selected = true <script> var dymanicValue = 'yourDymanicValue'; function initSel() { var oSel = document.getElementByIdx_x('sel'); for (var i = 0; i < oSel.length; i++) { if (dymanicValue == oSel.value) { oSel.selected = true; break; } } } window.onload = initSel; </script> <select id='sel'></select> // 给定一个值，然后对Select列表操作，如：判定是否有给定值，选择给定值，替换给定值等 function HSSelectItem(selectObj,itemValue) { for(var i=0;i<selectObj.options.length;i++) { if(selectObj.options.value == itemValue) { selectObj.options.selected = true; break; } } } function HSUpateItem(selectObj,itemText,itemValue) { for(var i=0;i<selectObj.options.length;i++) { if(selectObj.options.value == itemValue) { selectObj.options.text = itemText; break; } } } // Select列表的项的操作，如：添加，删除某项 function HSInsertItem(selectObj,itemText,itemValue) { var varItem = new Option(itemText,itemValue); selectObj.options.add(varItem); //添加到指定的位置 //selectObj.options.add(varItem,2); } function HSDeleteItem(selectObj,itemValue) { for(var i=0;i<selectObj.options.length;i++) { if(selectObj.options.value == itemValue) { selectObj.remove(i); break; } } } // Select列表的当前值操作：如取得文本域，值域，Index等 function HSCurText(selectObj){ var type=document.getElementByIdx_x("type").options[document.getElementByIdx_x ("type").options.selectedIndex].value var index = selectObj.options.selectedIndex; var text = selectObj[index].text; var val=selectObj[index].value; alert('text:'+text+',value:'+val+',index:'+index); } // Select列表的项的全部清空 function HSClear(selectObj) { selectObj.options.length = 0; } //DOM 创建 Select 标签 function HSCreate() { var myselect = document.createElement_x('select'); myselect.name = "dom"; myselect.setAttribute('atr', 'atr') myselect.onchange = function() { alert("change"); } var itemText = new Array(); itemText[0] = "opt1"; itemText[1] = "opt2"; var itemValue = new Array(); itemValue[0] = "1"; itemValue[1] = "0"; for (var i = 0; i < 2; i++) { myselect.options = new Option(itemText, itemValue); } myselect.options[0].selected = true; document.documentElement.appendChild(myselect); } //测试代码： function test(t) { var type=document.getElementByIdx_x("type"); if(t==1){ HSSelectItem(type,2); }else if(t==2){ HSInsertItem(type,'new',5); }else if(t==3){ HSDeleteItem(type,4); }else if(t==4){ HSCurText(type); }else if(t==5){ HSClear(type); }else if(t==6){ HSCreate(); } } HTML代码： view plaincopy to clipboardprint? <a href="javascript:test(1);">test1</a> <a href="javascript:test(2);">test2</a> <a href="javascript:test(3);">test3</a> <a href="javascript:test(4);">test4</a> <a href="javascript:test(5);">test5</a> <a href="javascript:test(6);">test6</a> <br> <select id =type style="HEIGHT: 20px" > <option value="" SELECTED>select</option> <option value="1" >Ever</option> <option value="2" >Zm</option> <option value="3" >Cos</option> <option value="4" >Yan</option> </select>