Select combo option capture instance code _ form special effect

Source: Internet
Author: User
This is a registration form, requiring users to select "Professional staff" and "qualitative staff, display the corresponding forms of "visitors are available" and "industries that are easy to access" respectively. When the two boxes are unselected, they are also hidden.

This is a registration form, requiring users to select "Professional staff" and "qualitative staff, display the corresponding forms of "visitors are available" and "industries that are easy to access" respectively. When the two boxes are unselected, they are also hidden.
Html section

The Code is as follows:



Register for a part-time position (required)
Press Ctrl to select multiple
Household Administrator Street visitor Street access blocker Telephone staff Mystery customer Professional staff Enterprise visitors Qualitative Liaison Officer Host Quality Controller Data Recorder



The type of the respondent can be provided.



Industries that are easy to access




Javascript Section

Option cannot define the event (I did not try it out), so the event must be defined on select. The onchange event is used here, And the onchange event is triggered when the object changes. Here, the onchange event is much more reasonable than the onclick event, and the effect is better.
When debugging this script, I first used selectedIndex. The experiment found that selectedIndex can only capture the first selected option when multiple options are selected. I checked the reference books and found that I had taken a detour.

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)
{
Osuppvisvisitbox. style. display = "block ";
}
Else {
Osuppvisvisitbox. style. display = "none ";
}

}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.