简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

select组合框option的捕捉实例代码_表单特效

WBOY
Lepaskan： 2016-05-16 19:00:17
asal
1019 orang telah melayarinya

这是一份报名表单，要求用户在选中“专业人士访问员”和“定性访问员”后，分别显示“可提供被访者类型”和“容易接触到的行业”的对应表单。当呈未选中状态时，这2个框也对应的隐藏起来。
html部分

复制代码 代码如下:









javascript部分

option不能定义事件（我没试出来），所以事件要定义在select上。 这里使用的是onchange事件，onchange事件是当对象发生变化时触发，在这里用onchange比onclick合理许多，效果也好。
在调试这个脚本的时候，一开始我是用selectedIndex，试验多次发现selectedIndex在多选的情况下只能捕捉到第一个选中的选项，无法承担多选的工作。查了下参考书，才发现自己走了弯路。

复制代码 代码如下:

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";
}

}

Label berkaitan：
option select tangkap
sumber：php.cn
Artikel sebelumnya：判断JavaScript对象是否可用的最正确方法分析_javascript技巧 Artikel seterusnya：IE与firefox之jquery用法区别_jquery
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
SQL Count() juga memerlukan 0 Saya hanya mempunyai satu jadual dan saya ingin mengira setiap entri tag yang bermula deng...
daripada 2024-04-06 19:48:53
0
1
449
sql groupby tidak berfungsi, saya mahu kumpulan mengikut code_branch ->pilih('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameasc...
daripada 2024-04-06 19:24:49
0
2
488
Ralat telah ditemui semasa cuba mendapatkan semula versi terkini pakej daripada search.maven.org "Ralat: Tidak dapat mengambil data daripada repositori Maven" semasa mendapatkan...
daripada 2024-04-05 12:11:23
0
1
1471
Ubah suai gaya matSelect apabila memaparkan pilihan Bagaimana untuk menukar sifat pilih tikar apabila pilihan dihidupkan? <mat-selectclass=...
daripada 2024-04-05 09:23:19
0
1
1374
Gema di dalam div dengan gema bersarang Saya cuba menggunakan echo<?phprequire'connect.php';$query=mysqli_query($conn,"SEL...
daripada 2024-04-04 11:09:23
0
1
390
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！