select option总结

 <!--=======一段判断到底是哪个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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>