html:select标签用法

html:select标签用法

---

<html:select property ="if_end">
<option value="0">否</option>
<option value="1">是</option>
</html:select>
将option中value的值给if_end

动态用法一：

<html:select property="personnelId">
<html:option value="">请选择</html:option>
<html:options collection="personList" property="personId" labelProperty="personName"/>
</html:select>

 

代码解释：

<html:select property="personnelId"> ：

该部分代码最终返回的值存储在personnelId变量中；

<html:option value="">请选择</html:option>
默认选项，值为空，为了满足用户不想选择任何选项的需求；

<html:options collection="personList" property="personId" labelProperty = "personName"/> ：
<html:options>标签会自动根据参数产生多个<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[i].selected = true

<script>
var dymanicValue = 'yourDymanicValue';
function initSel() {
var oSel = document.getElementById('sel');
for (var i = 0; i < oSel.length; i++) {
if (dymanicValue == oSel[i].value) {
oSel[i].selected = true;
break;
}
}
}
window.onload = initSel;
</script>
<select id='sel'></select>

1. // 给定一个值，然后对Select列表操作，如：判定是否有给定值，选择给定值，替换给定值等   
2. /*给定一个值域,Select列表自动选中该值域*/  
3. function HSSelectItem(selectObj,itemValue)   
4. {     
5.      for(var i=0;i<selectObj.options.length;i++)   
6.       {   
7.          if(selectObj.options[i].value == itemValue)   
8.           {   
9.               selectObj.options[i].selected = true;   
10.              break;   
11.           }   
12.       }                     
13. }   
14. /*给定一个值域,文本域,更新Select列表该值域的对应文本域*/  
15. function HSUpateItem(selectObj,itemText,itemValue)   
16. {     
17.      for(var i=0;i<selectObj.options.length;i++)   
18.       {   
19.          if(selectObj.options[i].value == itemValue)   
20.           {   
21.               selectObj.options[i].text = itemText;   
22.              break;   
23.           }   
24.       }      
25.         
26. }   
27.   
28. // Select列表的项的操作，如：添加，删除某项   
29. /*给定一个值域,Select列表自动选中该值域*/  
30. function HSInsertItem(selectObj,itemText,itemValue)   
31. {     
32.      var varItem = new Option(itemText,itemValue);   
33.       selectObj.options.add(varItem);   
34.      //添加到指定的位置   
35.      //selectObj.options.add(varItem,2);   
36. }   
37.   
38. /*给定一个值域,Select列表删除该值域*/  
39. function HSDeleteItem(selectObj,itemValue)   
40. {     
41.      for(var i=0;i<selectObj.options.length;i++)   
42.       {   
43.          if(selectObj.options[i].value == itemValue)   
44.           {   
45.               selectObj.remove(i);   
46.              break;   
47.           }   
48.       }        
49. }   
50.   
51.   
52. // Select列表的当前值操作：如取得文本域，值域，Index等   
53. function HSCurText(selectObj){   
54. var type=document.getElementById("type").options[document.getElementById   
55.   
56. ("type").options.selectedIndex].value   
57. var index = selectObj.options.selectedIndex;   
58. var text = selectObj[index].text;   
59. var val=selectObj[index].value;   
60. alert('text:'+text+',value:'+val+',index:'+index);   
61. }   
62.   
63.   
64. // Select列表的项的全部清空   
65. function HSClear(selectObj)   
66. {     
67.       selectObj.options.length = 0;   
68. }   
69.   
70. //DOM 创建 Select 标签   
71. function HSCreate() {   
72. var myselect = document.createElement('select');   
73. myselect.name = "dom";   
74. myselect.setAttribute('atr', 'atr')   
75. myselect.onchange = function() {   
76.    alert("change");   
77. }   
78. var itemText = new Array();   
79. itemText[0] = "opt1";   
80. itemText[1] = "opt2";   
81. var itemValue = new Array();   
82. itemValue[0] = "1";   
83. itemValue[1] = "0";   
84. for (var i = 0; i < 2; i++) {   
85.    myselect.options[i] = new Option(itemText[i], itemValue[i]);   
86. }   
87. myselect.options[0].selected = true;   
88.   
89. document.documentElement.appendChild(myselect);   
90.   
91. }   
92.   
93. //测试代码：   
94.   
95. function test(t)   
96. {     
97. var type=document.getElementById("type");   
98. if(t==1){   
99.    HSSelectItem(type,2);   
100. }else if(t==2){   
101.    HSInsertItem(type,'new',5);   
102. }else if(t==3){   
103.    HSDeleteItem(type,4);   
104. }else if(t==4){   
105.    HSCurText(type);   
106. }else if(t==5){   
107.    HSClear(type);   
108. }else if(t==6){   
109.    HSCreate();   
110. }                
111. }  

HTML代码：

view plain copy to clipboard print ?

1. <a href="javascript:test(1);">test1</a> <a href="javascript:test(2);">test2</a>  
2. <a href="javascript:test(3);">test3</a>   <a href="javascript:test(4);">test4</a>  
3. <a href="javascript:test(5);">test5</a>  <a href="javascript:test(6);">test6</a>  
4. <br>  
5. <select id =type style="HEIGHT: 20px" >  
6.   <option value="" SELECTED>select</option>  
7.   <option value="1" >Ever</option>  
8.   <option value="2" >Zm</option>  
9.   <option value="3" >Cos</option>  
10.   <option value="4" >Yan</option>  
11. </select>