快捷導(dǎo)航

JavaScript初級(jí)教程(第五課續(xù))第2/3頁

更新時(shí)間：2007年04月05日 00:00:00 作者：

選單是我們所學(xué)的表單選項(xiàng)中最奇特的一種。有兩種基本的格式：下列選單和列表選單。以下為例子：

奇特之處在于這個(gè)選單有名稱，但其中的各個(gè)選項(xiàng)沒有名稱。例如，在HTML中，第1個(gè)選單如下：

<select name="pulldown_1" size="1">
    <option>probiscus </option>
    <option>spider </option>
    <option>lemur </option>
    <option>chimp </option>
    <option>gorilla </option>
    <option>orangutan </option>
</select>

注意這個(gè)選單的名稱是pulldown_1，但各個(gè)選項(xiàng)沒有名稱。所以要調(diào)用其中的各個(gè)選項(xiàng)則有點(diǎn)困難。

幸好數(shù)組可以幫助我們調(diào)用其中的選項(xiàng)。如果你想改變?cè)撓铝羞x單中的第2個(gè)選項(xiàng)，你可以這樣做：

window.document.form_1.pulldown_1.options[1].text = 'new_text';

這是因?yàn)檫x單的元素有一個(gè)選項(xiàng)屬性，而該屬性是選單所有選項(xiàng)的集合而成的數(shù)組。點(diǎn)擊change the selectt然后從下拉選單從下列選單中查看其選項(xiàng)是否已經(jīng)被改變。現(xiàn)在第2個(gè)選項(xiàng)應(yīng)該是*thau*。

除了選項(xiàng)屬性，選單還有一項(xiàng)屬性叫做selectedIndex。一個(gè)選項(xiàng)被選擇后，selectedIndex屬性將變成被選項(xiàng)的數(shù)組索引號(hào)（序列號(hào)）。選擇第2個(gè)列表選單中的一個(gè)選項(xiàng)，然后檢查索引號(hào)。記住數(shù)組中的第1個(gè)選項(xiàng)的索引號(hào)是0。

<a href="#" onClick="alert('index is: ' + window.document.form_1.list_1.selectedIndex);return false;">check the index.</a>

表單的名稱是form_1，列表選單的名稱是list_1。selectedIndex屬性值為window.document.form_1.list_1.selectedIndex。你還可
以將selectedIndex設(shè)置如下：

window.document.form_1.list_1.selectedIndex = 1;

并高亮度顯示第2個(gè)選項(xiàng)。

一旦你得到被選項(xiàng)的索引號(hào)，你就可以發(fā)現(xiàn)其內(nèi)容：

var the_select = window.document.form_1.list_1;

var the_index = the_select.selectedIndex;

var the_selected = the_select.options[the_index].text;

selectedIndex屬性很有用，但如果有多個(gè)選項(xiàng)同時(shí)被選中，會(huì)如何呢？

選單元素的處理器為onChange()。當(dāng)選單發(fā)生變化時(shí)，則該處理器被激活。