<!--=======一段判断到底是哪个select的option被选中的代码================-->
<form name="form1"> <select name="file_source" size="1" id="file_source" onChange="alert(document.form1.file_source.options[ document.form1.file_source.selectedIndex].value)"> <option value="选定" selected>选定</option> <option value="办公室">办公室</option> <option value="机房">机房</option> <option value="教研室">教研室</option> <option value="开发室">开发室</option> </select> </form> <!--=================================================================--> 应用: //tb2,th1为css定义内容 //<select>中的 <table border="i" cellpadding="3" cellspacing="1" align="center" class="tb2" bordercolor="#666666"> <tr><th colspan="2" class="th1">编辑页面<th></tr> <tr> <th>标记</th> <td> <spring:bind path="obj.map['FLAG']"> <select name='<c:out value="${status.expression}"/>'> <option value="0" <c:if test="${status.value==0}">selected</c:if>>自动 </option> <option value="1" <c:if test="${status.value==1}">selected</c:if>>手动 </option> </select> </spring:bind> </td> </tr> <tr> <th colspan="2"> <input type="hidden" name="页面号" value="1"/> <input type="submit" value="保存" /> <input type="button" value="返回" onClick="location.href='main.do?页面号=1"> </th> </tr> </table> <!-- 关于select: name='<c:out value="${status.expression}"/>' value="0" name=value value与name对应:0是${status.expression}的值 实际操作中,选定一个下拉菜单,就意味着页面范围内给 name赋选定的value.
关于使用链接传值:main.do?页面号=1
其中在整个页面中:name="页面号"与value="1"对应. 将他们作为参数以表单形式传到其它页面(其它页面也有name="页面号" value="?") -->
<!--=================================================================-->
<!-- 前提: 以下拉框形式显示select,即size="1"(大多以这种形式使用,更符合实际)
①select.options("id")方法取出一个option
②证明option的索引不能通过option.index来更改其索引值
③通过option的swapNode方法来交换索引
④通过select的selectIndex来选中一个option
--> 【全码】 <head> <script> <!-- function Start() {
//让【洪】作为第一项先显示,看我怎么获取该option
//这种需求应该很多,但在网上我还没搜到过 //注意:有多个id为洪,将返回一个option集合 //id/name不能为汉字,刚才调了半天才找出原因的 var source=document.form1.selTest.options("hong"); alert("把【"+source.innerHTML+"】换到最上面");
//交换位置
source.swapNode(document.form1.selTest.options(0)); //用[]也可以,Why? source.swapNode(document.form1.selTest.options[0]); //日的,还以为没交换成功,原来是选中项没改变,我们让它选中 document.form1.selTest.selectedIndex=0; //注:该方法主要是给一个字符串,把与字符串相同的项放到第几个位置. //刚刚想到可以这样获取该项: //document.getElementById("hong").innerHTML; } function AX() { //获取div以便进行显示 var show=document.getElementById("show"); var tempIndex=document.form1.selTest.selectedIndex; show.innerHTML="选中项的索引:"+document.form1.selTest.selectedIndex+"<br>"; show.innerHTML+="刚刚选中项的值:(直接取,最简单)"+document.form1.selTest.value+"<br>"; show.innerHTML+="刚刚选中项的值:"+document.form1.selTest.options(tempIndex).value+"<br>"; show.innerHTML+="刚刚选中项的显示部分(通过索引来,很麻烦):"+document.form1.selTest.options(tempIndex).innerHTML; show.innerHTML+="刚刚选中项的显示部分(通过索引来,后面是text也可以,Why?):"+document.form1.selTest.options(tempIndex).text; } --> </script> </head> <BODY> <FORM name="form1"> <div id="show"></div> <SELECT name="selTest" onchange="javascript:AX();"> <OPTION VALUE="AX0">张</option> <OPTION id="hong" VALUE="AX1">洪</option> <OPTION VALUE="AX2">志</option> </SELECT> <input value="改变option的顺序" type="button" onClick="javascript:Start();"> </FORM> </BODY> |