select組合框option的捕捉實(shí)例代碼
這是一份報(bào)名表單,要求用戶在選中“專業(yè)人士訪問(wèn)員”和“定性訪問(wèn)員”后,分別顯示“可提供被訪者類型”和“容易接觸到的行業(yè)”的對(duì)應(yīng)表單。當(dāng)呈未選中狀態(tài)時(shí),這2個(gè)框也對(duì)應(yīng)的隱藏起來(lái)。
html部分
<p>
<label class="title">報(bào)名參加的兼職職位(必填項(xiàng))<br/>按住Ctrl鍵可多選</label>
<select onchange="showEasyVisitBox(this)" size="10" style="width: 200px;" multiple="multiple" id="kc_selectjob" name="kc_selectjob">
<option selected="selected" value="入戶訪問(wèn)員">入戶訪問(wèn)員</option>
<option value="街訪訪問(wèn)員">街訪訪問(wèn)員</option>
<option value="街訪攔截員">街訪攔截員</option>
<option value="電話訪問(wèn)員">電話訪問(wèn)員</option>
<option value="神秘顧客">神秘顧客</option>
<option value="專業(yè)人士訪問(wèn)員">專業(yè)人士訪問(wèn)員</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不能定義事件(我沒(méi)試出來(lái)),所以事件要定義在select上。 這里使用的是onchange事件,onchange事件是當(dāng)對(duì)象發(fā)生變化時(shí)觸發(fā),在這里用onchange比onclick合理許多,效果也好。
在調(diào)試這個(gè)腳本的時(shí)候,一開(kāi)始我是用selectedIndex,試驗(yàn)多次發(fā)現(xiàn)selectedIndex在多選的情況下只能捕捉到第一個(gè)選中的選項(xiàng),無(wú)法承擔(dān)多選的工作。查了下參考書(shū),才發(fā)現(xiàn)自己走了彎路。
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";
}
}
相關(guān)文章
JS 動(dòng)態(tài)添加列表框項(xiàng)效果代碼
動(dòng)態(tài)添加列表框項(xiàng),不錯(cuò)的效果,需要用的朋友可以參考下。2009-07-07javascript 回車鍵觸發(fā)表單提交的問(wèn)題
我們有時(shí)候希望回車鍵敲在文本框(input element)里來(lái)提交表單(form),但有時(shí)候又不希望如此。2010-04-04select列表內(nèi)容交換的js實(shí)現(xiàn)代碼
js實(shí)現(xiàn)左右select列表內(nèi)容交換傳遞,原來(lái)就是先獲取當(dāng)期選中select的值,然后添加到對(duì)面的select中,然后刪除選中內(nèi)容。2009-12-12用javascript判斷輸入數(shù)據(jù)是否貨幣并自動(dòng)添加¥符號(hào)的代碼
用javascript判斷輸入數(shù)據(jù)是否貨幣并自動(dòng)添加¥符號(hào)的代碼...2007-08-08