Select combo box Option Capture Instance code _ form effects

Source: Internet
Author: User

This is an application form that requires the user to display the corresponding form for "The type of interviewee" and the "accessible industry" after selecting the "Professional visitor" and "qualitative visitor". When it is unchecked, the 2 boxes are also hidden.
HTML section

Copy Code code as follows:

<p>
<label class= "title" > Sign up for a part-time position (required) <br/> hold down the CTRL key to select multiple </label>
<select onchange= "Showeasyvisitbox (This)" size= "style=" width:200px; multiple= "multiple" id= "Kc_selectjob" Name= "Kc_selectjob" >
<option selected= "selected" value= "household Visitor" > Household visitor </option>
<option value= "Street Visitor" > Street Visitor </option>
<option value= "Street-Visiting Interceptor" > Street Interceptor </option>
<option value= Phone visitor > Phone Visitor </option>
<option value= "Mystery Customer" > Mystery customer </option>
<option value= "Professional Visitor" > Professional visitors </option>
<option value= "Enterprise Deep Visitor" > Deep visitor </option>
<option value= "qualitative Liaison" > Qualitative Liaison </option>
<option value= "host" > Host </option>
<option value= "Quality control Officer" > Quality controller </option>
<option value= "Data entry Clerk" > Data Entry Clerk </option>
</select>
</p>
<p id= "Supportvisitbox" style= "Display:none;" >
<label class= "title" > can provide respondents type </label>
</p>
<p id= "Easyvisitbox" style= "Display:none;" >
<label class= "title" > Easy access to Industry </label>
</p>


JavaScript section

Option cannot define an event (I did not try it out), so the event is defined on the select. Here is the use of onchange events, onchange events are triggered when the object changes, where the onchange than the onclick reasonable many, the effect is good.
At the time of debugging this script, I started with SelectedIndex and tried to find that SelectedIndex could only capture the first selected option in multiple selections, and could not undertake multiple selections. Check the next reference books, only to find that they have gone a detour.

Copy Code code 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";
}

}

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.