JavaScript

   


選擇 (Select)


選擇

  方法 屬性 事件
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 數目減一, 即是刪除最後一個選項。







[到頁頂] [首頁] [速查表]