简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-05-16 19:00:17
Original
1020 Leute haben es durchsucht

这是一份报名表单，要求用户在选中“专业人士访问员”和“定性访问员”后，分别显示“可提供被访者类型”和“容易接触到的行业”的对应表单。当呈未选中状态时，这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";
}

}

Verwandte Etiketten：
option select 捕捉
Quelle：php.cn
Vorheriger Artikel：判断JavaScript对象是否可用的最正确方法分析_javascript技巧 Nächster Artikel：IE与firefox之jquery用法区别_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
SQL Count() erfordert ebenfalls 0 Ich habe nur eine Tabelle und möchte jeden Eintrag eines Tags zählen, der mit 0 beginnt. J...
Aus 2024-04-06 19:48:53
0
1
449
SQL Groupby funktioniert nicht, ich möchte nach Code_Branch gruppieren ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameas...
Aus 2024-04-06 19:24:49
0
2
488
Beim Versuch, die neueste Version eines Pakets von search.maven.org abzurufen, ist ein Fehler aufgetreten „Fehler: Es konnten keine Daten aus dem Maven-Repository abgerufen werden“ beim Abrufen de...
Aus 2024-04-05 12:11:23
0
1
1471
Ändern Sie den matSelect-Stil, wenn Optionen angezeigt werden Wie ändere ich die Eigenschaften von mat-select, wenn die Option aktiviert ist? <mat-se...
Aus 2024-04-05 09:23:19
0
1
1374
Echo innerhalb von Div mit verschachteltem Echo Ich versuche echo<?phprequire'connect.php';$query=mysqli_query($conn,"SELECT*FROM`...
Aus 2024-04-04 11:09:23
0
1
390
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！