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