新发表

新评论

留言信息

链接收藏

免费注册博客通道

快速登陆

選擇

簡介

下一節 到頁頂

選 擇 物 件 即 是 HTML 的 <select> 標 記 ， 而 這 個 標 記 內 的 <option> 標 記 就 稱 為 選 項 。

	方法	屬性	事件
select	blur() focus()	length name options[ ] selectedIndex	onBlur onFocus onChange

例 子 ： 檢 查 Select 物 件 的 一 個 選 項 ( 通 常 用 於 非 multiple select)

<form> <select name="interest" size="1" onChange="changed(this)"> <option selected value="int0">Computing</option> <option value="int1">Music</option> <option value="int2">Sports</option> </select> </form> <script> function changed(theselect) { alert(theselect.value) } </script>

例 子 ： 檢 查 Select 物 件 的 所 有 選 項 ( 通 常 用 於 multiple select)

<form> <select name="interest" size="7" multiple onChange="changed(this)"> <option selected value="int0">Computing</option> <option value="int1">Music</option> <option value="int2">Sports</option> </select> </form> <script> function changed(theselect) { var output="" var id = theselect.selectedIndex var thename = theselect.name var num_options = theselect.length output += "selectedIndex = " + id + "\n" output += "Your " + thename + " is " + theselect.options[id].text alert(output) } </script>

例 子 說 明 ：

• 如 果 Select 物 件 沒 有 任 何 Option 被 選 取 ， selectedIndex 屬 性 就 等 於 負 一 (-1) 。

選項

上一節  到頁頂

option	defaultSelected	是否預設的選項， 選擇項目 HTML 標記的 selected 屬性 (true / false)
	selected	是否被瀏覽者選取 (true / false)
	text	選項的顯示文字
	value	選項的值

你 也 可 以 自 行 產 生 Option 物 件 ， 以 修 改 頁 內 的 Option 。

語 法 ：

var Option_var = new Option(text , value, defaultSelected , selected)

說 明 ：

text	選項的顯示文字
value	選 項 的 值
defaultSelected	是否預設的選項 (true / false)
selected	是否替瀏覽者選取 (true / false)

• 以上四個參數都是選擇性的

例 子 ： 將 自 訂 選 項 加 入 到 Select

<form> <select name="interest" size="7"> </select> <input type="button" value="Add Options" onclick="add(this.form.interest)"> </form> <script> function add(theselect) { var textarray = new Array("Computing","Music","Sports") var valuearray = new Array("int0","int1","int2") for (i = 0 ; i < textarray.length ; i++) {   theselect.options[theselect.length] = new Option(textarray[i] , valuearray[i]) } } </script>

例 子 說 明 ：

• theselect.options[theselect.length] = new Option(textarray[i] , valuearray[i])

  將 新 的 Option 加 入 尾 部 位 置 ， 即 theselect.length 位 置

例 子 ： 刪 除 Select 內 某 個 Option

Select an option and delete it. <form> <select name="interest" size="7"> <option value="int0">Computing</option> <option value="int1">Music</option> <option value="int2">Sports</option> </select> <input type="button" value="Delete Options" onclick="del(this.form.interest)"> </form> <script> function del(theselect) { var id = theselect.selectedIndex if (id != -1) {   for (i = id ; i < theselect.length -1 ; i++) {     // For NN, you can use theselect.options[i] = theselect.options[i+1]     optext = theselect.options[i+1].text     opvalue = theselect.options[i+1].value     opdefault = theselect.options[i+1].defaultSelected     opselected = theselect.options[i+1].selected     theselect.options[i] = new Option(optext, opvalue, opdefault, opselected)   }   theselect.length -- } } </script>

例 子 說 明 ：

• 在 例 子 中 的 for 迴 圈 的 工 作 其 實 只 要 寫 一 句 便 行 ：

  theselect.options[i] = theselect.options[i+1]

  不 過 站 長 的 發 現 這 句 會 令 IE 產 生 錯 誤 ， 而 NN 就 不 會 ， 所 以 站 長 寫 多 幾 句 敘 述 來 間 接 存 取 這 兩 個 Option ， 令 它 能 夠 在 IE 順 利 執 行 。

• theselect.length --

  把 Select 內 的 Option 數 目 減 一 ， 即 是 刪 除 最 後 一 個 選 項 。

Posted by jser | 阅读全文() | 回复(0) | 引用通告() | 编辑