Home >Web Front-end >JS Tutorial >Capture example code of select combo box option_form special effects
Capture example code of select combo box option_form special effects
- WBOYOriginal
- 2016-05-16 19:00:171061browse
This is a registration form that requires users to display the corresponding forms for "Types of interviewees available" and "Easily accessible industries" after selecting "Professional Interviewer" and "Qualitative Interviewer" respectively. When unselected, these two boxes are also hidden accordingly.
html part
Copy code The code is as follows:
javascript part
option cannot define events (I haven’t tried it), so events must be defined on select. The onchange event is used here. The onchange event is triggered when the object changes. Using onchange here is much more reasonable and effective than onclick.
When debugging this script, I used selectedIndex at the beginning. After many experiments, I found that selectedIndex can only capture the first selected option in the case of multiple selections, and cannot handle multiple selections. After checking the reference book, I realized that I had taken a detour.
Copy code The code is as follows:
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";
}
}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Analysis of the most correct method to determine whether a JavaScript object is available_javascript skillsNext article：Analysis of the most correct method to determine whether a JavaScript object is available_javascript skills
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills