萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> select option總結

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>
copyright © 萬盛學電腦網 all rights reserved