快捷導(dǎo)航

select組合框option的捕捉實例代碼

更新時間：2008年09月30日 00:41:02 作者：

這是一份報名表單，要求用戶在選中“專業(yè)人士訪問員”和“定性訪問員”后，分別顯示“可提供被訪者類型”和“容易接觸到的行業(yè)”的對應(yīng)表單。當(dāng)呈未選中狀態(tài)時，這2個框也對應(yīng)的隱藏起來。

這是一份報名表單，要求用戶在選中“專業(yè)人士訪問員”和“定性訪問員”后，分別顯示“可提供被訪者類型”和“容易接觸到的行業(yè)”的對應(yīng)表單。當(dāng)呈未選中狀態(tài)時，這2個框也對應(yīng)的隱藏起來。
html部分

復(fù)制代碼代碼如下:

<p> 
<label class="title">報名參加的兼職職位(必填項)<br/>按住Ctrl鍵可多選</label> 
<select onchange="showEasyVisitBox(this)" size="10" style="width: 200px;" multiple="multiple" id="kc_selectjob" name="kc_selectjob"> 
<option selected="selected" value="入戶訪問員">入戶訪問員</option> 
<option value="街訪訪問員">街訪訪問員</option> 
<option value="街訪攔截員">街訪攔截員</option> 
<option value="電話訪問員">電話訪問員</option> 
<option value="神秘顧客">神秘顧客</option> 
<option value="專業(yè)人士訪問員">專業(yè)人士訪問員</option> 
<option value="企業(yè)深訪員">企業(yè)深訪員</option> 
<option value="定性聯(lián)絡(luò)員">定性聯(lián)絡(luò)員</option> 
<option value="主持人">主持人</option> 
<option value="質(zhì)量控制員">質(zhì)量控制員</option> 
<option value="數(shù)據(jù)錄入員">數(shù)據(jù)錄入員</option> 
</select> 
</p> 
<p id="supportvisitBox" style="display: none;"> 
<label class="title">可提供被訪者類型</label> 
</p> 
<p id="easyvisitBox" style="display: none;"> 
<label class="title">容易接觸到的行業(yè)</label> 
</p> 

javascript部分

option不能定義事件（我沒試出來），所以事件要定義在select上。這里使用的是onchange事件，onchange事件是當(dāng)對象發(fā)生變化時觸發(fā)，在這里用onchange比onclick合理許多，效果也好。
在調(diào)試這個腳本的時候，一開始我是用selectedIndex，試驗多次發(fā)現(xiàn)selectedIndex在多選的情況下只能捕捉到第一個選中的選項，無法承擔(dān)多選的工作。查了下參考書，才發(fā)現(xiàn)自己走了彎路。

復(fù)制代碼代碼如下:

var oListBox = document.getElementById("kc_selectjob"); 

oListBox.onchange = function showEasyVisitBox(){ 
var oEasyvisitBox = document.getElementById("easyvisitBox"); 
var oSupportvisitBox = document.getElementById("supportvisitBox"); 
if (oListBox.options[5].selected) 
{ 
oEasyvisitBox.style.display = "block"; 
} 
else { 
oEasyvisitBox.style.display = "none"; 
} 

if (oListBox.options[7].selected) 
{ 
oSupportvisitBox.style.display = "block"; 
} 
else { 
oSupportvisitBox.style.display = "none"; 
} 

}