Problem with dynamic drop down

wmguk · October 21, 2008

<script>
function nationality_onChange(nationalityDDM) {
var cnationality = nationalityDDM.options[nationalityDDM.selectedIndex].value;
if (cnationality=="british") {
document.getElementById("showtextfield").style.display="none";
}
else {
document.getElementById("showtextfield").style.display="block";
}
}
</script>
<script>
function permit_onChange(permitDDM) {
var cpermit = permitDDM.options[permitDDM.selectedIndex].value;
if (cpermit=="permit") {
document.getElementById("showpermit").style.display="block";
}
else {
document.getElementById("showpermit").style.display="none";
}
}
</script>

I'm trying to get the page to hide the options when the page loads, but if anything except british is selected it needs to display certain text.

it works on change, but not on page load, how can I have the text hidden until the selection is made?

<select name="nationality" id="nationality" class="generalblue" onchange="javascript:nationality_onChange(this)" >
                <option>-- Please Select --</option>
                <option value="american">American</option>
                <option value="british">British</option>
                <option>---------------------------</option>
</select>

this the drop down that is the selector, and then the info that is displayed if selected is not british

<table width="100%" border="0" cellpadding="1" cellspacing="0" class="general" id="shownat">
                <tr >
                  <td>Are you legally entitled to work within the UK
                  <select name="legalent" class="generalblue">
                <option>-- Please Select --</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
                  <br /></td>
                </tr>
                <tr >
                  <td>Do you understand enough English (Written and Spoken) for your own health and safety?
                    <select name="english" class="generalblue">
                      <option>-- Please Select --</option>
                      <option value="yes">Yes</option>
                      <option value="no">No</option>
                    </select></td>
                </tr>
                <tr >
                  <td>EU or Permit?
                    <select name="eupermit" class="generalblue" onchange="javascript:permit_onChange(this)" >
                      <option>-- Please Select --</option>
                      <option value="EU">EU</option>
                      <option value="permit">Permit</option>
                    </select></td>
                </tr>
                <tr >
                  <td><div id="showpermit"><strong>Please send the original Work Permit to us <a href="contact.php">(See our address)</a></strong></div></td>
                </tr>
              </table>

cuboidgraphix · October 21, 2008

I think I know what you're trying to do.. It would be easier if you use <div>

This is one of my scripts.. maybe it's what you're looking for.

This is the javascript ... goes right before/above the

</head>

<!-- OnChange Script -->
<script type="text/javascript">
function f(sel){
var d=document, dv;
if(d.getElementById){
for(var ii=0; ii<sel.options.length; ii++){
dv=d.getElementById(sel.options[ii].value);
if(dv)
dv.style.display=sel.options[ii].selected?"block":"none";
}
}
}
</script>

This is my form and <div> (s).

<!-- Choices --> 
<select onchange="f(this)">
<option name="choice" value="f1">Choices</option>
<option name="choice" value="f2">BTS</option>
<option name="choice" value="f3">Sector</option>
<option name="choice" value="f4">Date</option>
</select> 

<div id="f1" style="display:block">
Please choose an option.
</div> 
<div id="f2" style="display:none">
F2 text goes in here.
</div>
<div id="f3" style="display:none">
F3 text goes in here.
</div>
<div id="f4" style="display:none">
F4 text goes in here.
</div>

wmguk · October 21, 2008

I see what your code is trying to do, it will show 4 different texts depending on what is selected in the drop down, is that right?

What i want to do is when the page loads it doesnt show the text in id="shownat".... its only on change that i want to show the info

cuboidgraphix · October 21, 2008

Well ... in my script only the ... 'Please choose an option' text will show under the drop down menu. All other div(s) are hidden. it's when you do an onchange that the div is replaced to the other div(s). example.. when you choose option 3 ... only the information in div id='f3' will show.

But my script could easily hide all of them.. just change the first div to style="display:none" ... and none of the div(s) will show on page load. It's until you make a selection that the selected div will appear.

wmguk · October 21, 2008

Hi again,

I've put your code on my page, and i get a fault - the original page is http://www.cowperrecruitment.co.uk/candreg.php

I've put

<script type="text/javascript">
function f(sel){
var d=document, dv;
if(d.getElementById){
for(var ii=0; ii<sel.options.length; ii++){
dv=d.getElementById(sel.options[ii].value);
if(dv)
dv.style.display=sel.options[ii].selected?"block":"none";
}
}
}
</script>

and then on my page code is:

                <select name="nationality" id="nationality" class="generalblue" onchange="f(this)" >
                <option selected="selected">-- Please Select --</option>
                <option value="american">American</option>
                <option value="british">British</option>
                </select>


<div id="british" style="display:none">
              <table width="100%" border="0" cellpadding="1" cellspacing="0" class="general">
                <tr >
                  <td> </td>
                </tr>
                <tr >
                  <td>Are you legally entitled to work within the UK
                  <select name="legalent" class="generalblue">
                <option>-- Please Select --</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
                  <br /></td>
                </tr>
                <tr >
                  <td>Do you understand enough English (Written and Spoken) for your own health and safety?
                    <select name="english" class="generalblue">
                      <option>-- Please Select --</option>
                      <option value="yes">Yes</option>
                      <option value="no">No</option>
                    </select></td>
                </tr>
                <tr >
                  <td>EU or Permit?
                    <select name="eupermit" class="generalblue" onchange="javascript:permit_onChange(this)" >
                      <option>-- Please Select --</option>
                      <option value="EU">EU</option>
                      <option value="permit">Permit</option>
                    </select></td>
                </tr>
                <tr >
                  <td><div id="showpermit"><strong>Please send the original Work Permit to us <a href="contact.php">(See our address)</a></strong></div></td>
                </tr>
                <tr >
                  <td> </td>
                </tr>
              </table></div>

error is on line 108 - this one: for(var ii=0; ii<sel.options.length; ii++){

any thoughts?

wmguk · October 22, 2008

has anyone got any ideas why this form isnt working?

cuboidgraphix · October 22, 2008

I've troubleshot your script and found the error. You need to make two modifications..

1. Your onchange="f(sel)" choice menu should be this..

<select name="nationality" id="nationality" class="generalblue" onchange="f(this)" >
    <option value="" selected>-- Please Select --</option>
    <option value="american">American</option>
    <option value="british">British</option>
</select>

2. You need to include the other two option <div>(s). So insert this above the

<div id="" style="display:none"></div>
<div id="american" style="display:none"></div>

This should solve your problem. Let me know if it works out for you.

wmguk · October 22, 2008

ah ok, so I have to have a div for each of the options in the dropdown, this is my dropdown

<select name="nationality" id="nationality" class="generalblue" onchange="f(this)" >
                  <option value="" selected="selected">-- Please Select --</option>
                  <option value="american">American</option>
                  <option value="british">British</option>
                  <option>---------------------------</option>
                  <option value="afghan">Afghan</option>
                  <option value="albanian">Albanian</option>
                  <option value="algerian">Algerian</option>
                  <option value="andorran">Andorran</option>
                  <option value="angolan">Angolan</option>
                  <option value="antiguans">Antiguans</option>
                  <option value="argentinean">Argentinean</option>
                  <option value="armenian">Armenian</option>
                  <option value="australian">Australian</option>
                  <option value="austrian">Austrian</option>
                  <option value="azerbaijani">Azerbaijani</option>
                  <option value="bahamian">Bahamian</option>
                  <option value="bahraini">Bahraini</option>
                  <option value="bangladeshi">Bangladeshi</option>
                  <option value="barbadian">Barbadian</option>
                  <option value="barbudans">Barbudans</option>
                  <option value="batswana">Batswana</option>
                  <option value="belarusian">Belarusian</option>
                  <option value="belgian">Belgian</option>
                  <option value="belizean">Belizean</option>
                  <option value="beninese">Beninese</option>
                  <option value="bhutanese">Bhutanese</option>
                  <option value="bolivian">Bolivian</option>
                  <option value="bosnian">Bosnian</option>
                  <option value="brazilian">Brazilian</option>
                  <option value="bruneian">Bruneian</option>
                  <option value="bulgarian">Bulgarian</option>
                  <option value="burkinabe">Burkinabe</option>
                  <option value="burmese">Burmese</option>
                  <option value="burundian">Burundian</option>
                  <option value="cambodian">Cambodian</option>
                  <option value="cameroonian">Cameroonian</option>
                  <option value="canadian">Canadian</option>
                  <option value="cape verdean">Cape Verdean</option>
                  <option value="central african">Central African</option>
                  <option value="chadian">Chadian</option>
                  <option value="chilean">Chilean</option>
                  <option value="chinese">Chinese</option>
                  <option value="colombian">Colombian</option>
                  <option value="comoran">Comoran</option>
                  <option value="congolese">Congolese</option>
                  <option value="congolese">Congolese</option>
                  <option value="costa rican">Costa Rican</option>
                  <option value="croatian">Croatian</option>
                  <option value="cuban">Cuban</option>
                  <option value="cypriot">Cypriot</option>
                  <option value="czech">Czech</option>
                  <option value="danish">Danish</option>
                  <option value="djibouti">Djibouti</option>
                  <option value="dominican">Dominican</option>
                  <option value="dutch">Dutch</option>
                  <option value="east timorese">East Timorese</option>
                  <option value="ecuadorean">Ecuadorean</option>
                  <option value="egyptian">Egyptian</option>
                  <option value="emirian">Emirian</option>
                  <option value="equatorial guinean">Equatorial Guinean</option>
                  <option value="eritrean">Eritrean</option>
                  <option value="estonian">Estonian</option>
                  <option value="ethiopian">Ethiopian</option>
                  <option value="fijian">Fijian</option>
                  <option value="filipino">Filipino</option>
                  <option value="finnish">Finnish</option>
                  <option value="french">French</option>
                  <option value="gabonese">Gabonese</option>
                  <option value="gambian">Gambian</option>
                  <option value="georgian">Georgian</option>
                  <option value="german">German</option>
                  <option value="ghanaian">Ghanaian</option>
                  <option value="greek">Greek</option>
                  <option value="grenadian">Grenadian</option>
                  <option value="guatemalan">Guatemalan</option>
                  <option value="guinea-bissauan">Guinea-Bissauan</option>
                  <option value="guinean">Guinean</option>
                  <option value="guyanese">Guyanese</option>
                  <option value="haitian">Haitian</option>
                  <option value="herzegovinian">Herzegovinian</option>
                  <option value="honduran">Honduran</option>
                  <option value="hungarian">Hungarian</option>
                  <option value="i-kiribati">I-Kiribati</option>
                  <option value="icelander">Icelander</option>
                  <option value="indian">Indian</option>
                  <option value="indonesian">Indonesian</option>
                  <option value="iranian">Iranian</option>
                  <option value="iraqi">Iraqi</option>
                  <option value="israeli">Israeli</option>
                  <option value="italian">Italian</option>
                  <option value="ivorian">Ivorian</option>
                  <option value="jamaican">Jamaican</option>
                  <option value="japanese">Japanese</option>
                  <option value="jordanian">Jordanian</option>
                  <option value="kazakhstani">Kazakhstani</option>
                  <option value="kenyan">Kenyan</option>
                  <option value="kittian and nevisian">Kittian and Nevisian</option>
                  <option value="kuwaiti">Kuwaiti</option>
                  <option value="kyrgyz">Kyrgyz</option>
                  <option value="laotian">Laotian</option>
                  <option value="latvian">Latvian</option>
                  <option value="lebanese">Lebanese</option>
                  <option value="liberian">Liberian</option>
                  <option value="libyan">Libyan</option>
                  <option value="liechtensteiner">Liechtensteiner</option>
                  <option value="lithuanian">Lithuanian</option>
                  <option value="luxembourger">Luxembourger</option>
                  <option value="macedonian">Macedonian</option>
                  <option value="malagasy">Malagasy</option>
                  <option value="malawian">Malawian</option>
                  <option value="malaysian">Malaysian</option>
                  <option value="maldivan">Maldivan</option>
                  <option value="malian">Malian</option>
                  <option value="maltese">Maltese</option>
                  <option value="marshallese">Marshallese</option>
                  <option value="mauritanian">Mauritanian</option>
                  <option value="mauritian">Mauritian</option>
                  <option value="mexican">Mexican</option>
                  <option value="micronesian">Micronesian</option>
                  <option value="moldovan">Moldovan</option>
                  <option value="monacan">Monacan</option>
                  <option value="mongolian">Mongolian</option>
                  <option value="moroccan">Moroccan</option>
                  <option value="mosotho">Mosotho</option>
                  <option value="motswana">Motswana</option>
                  <option value="mozambican">Mozambican</option>
                  <option value="namibian">Namibian</option>
                  <option value="nauruan">Nauruan</option>
                  <option value="nepalese">Nepalese</option>
                  <option value="netherlander">Netherlander</option>
                  <option value="new zealander">New Zealander</option>
                  <option value="ni-vanuatu">Ni-Vanuatu</option>
                  <option value="nicaraguan">Nicaraguan</option>
                  <option value="nigerien">Nigerien</option>
                  <option value="north korean">North Korean</option>
                  <option value="norwegian">Norwegian</option>
                  <option value="omani">Omani</option>
                  <option value="pakistani">Pakistani</option>
                  <option value="palauan">Palauan</option>
                  <option value="panamanian">Panamanian</option>
                  <option value="papua new guinean">Papua New Guinean</option>
                  <option value="paraguayan">Paraguayan</option>
                  <option value="peruvian">Peruvian</option>
                  <option value="polish">Polish</option>
                  <option value="portuguese">Portuguese</option>
                  <option value="qatari">Qatari</option>
                  <option value="romanian">Romanian</option>
                  <option value="russian">Russian</option>
                  <option value="rwandan">Rwandan</option>
                  <option value="saint lucian">Saint Lucian</option>
                  <option value="salvadoran">Salvadoran</option>
                  <option value="samoan">Samoan</option>
                  <option value="san marinese">San Marinese</option>
                  <option value="sao tomean">Sao Tomean</option>
                  <option value="saudi">Saudi</option>
                  <option value="senegalese">Senegalese</option>
                  <option value="serbian">Serbian</option>
                  <option value="seychellois">Seychellois</option>
                  <option value="sierra leonean">Sierra Leonean</option>
                  <option value="singaporean">Singaporean</option>
                  <option value="slovakian">Slovakian</option>
                  <option value="slovenian">Slovenian</option>
                  <option value="solomon islander">Solomon Islander</option>
                  <option value="somali">Somali</option>
                  <option value="south african">South African</option>
                  <option value="south korean">South Korean</option>
                  <option value="spanish">Spanish</option>
                  <option value="sri lankan">Sri Lankan</option>
                  <option value="sudanese">Sudanese</option>
                  <option value="surinamer">Surinamer</option>
                  <option value="swazi">Swazi</option>
                  <option value="swedish">Swedish</option>
                  <option value="swiss">Swiss</option>
                  <option value="syrian">Syrian</option>
                  <option value="taiwanese">Taiwanese</option>
                  <option value="tajik">Tajik</option>
                  <option value="tanzanian">Tanzanian</option>
                  <option value="thai">Thai</option>
                  <option value="togolese">Togolese</option>
                  <option value="tongan">Tongan</option>
                  <option value="trinidadian or tobagonian">Trinidadian or Tobagonian</option>
                  <option value="tunisian">Tunisian</option>
                  <option value="turkish">Turkish</option>
                  <option value="tuvaluan">Tuvaluan</option>
                  <option value="ugandan">Ugandan</option>
                  <option value="ukrainian">Ukrainian</option>
                  <option value="uruguayan">Uruguayan</option>
                  <option value="uzbekistani">Uzbekistani</option>
                  <option value="venezuelan">Venezuelan</option>
                  <option value="vietnamese">Vietnamese</option>
                  <option value="yemenite">Yemenite</option>
                  <option value="zambian">Zambian</option>
                  <option value="zimbabwean">Zimbabwean</option>
                                </select>

is there anyway to say more than one value per div?

i tried <div id="british, american" style="display:none"></div> but it didnt work...

basically if the nationality is part of the EU then I need to show one set of info, if outside of the EU then a different set....

wmguk · October 22, 2008

oh, and I had to add a code in the JS for IE7

<!--[if IE]>
<script type="text/javascript">
function f(sel){
var d=document, dv;
if(d.getElementById){


for(var ii=0; ii<sel.options.length; ii++){
dv=d.getElementById(sel.options[ii].text);
if(dv)
dv.style.display=sel.options[ii].selected?"block":"none";
}
}
}
</script>
<![endif]-->

wmguk · October 23, 2008

is there anyway to make the same code display for different nationalities?

I need the same code to display for american and polish, but not for the rest...

could that be done?

Sign In

Problem with dynamic drop down

Recommended Posts

wmguk

Link to comment

Share on other sites

cuboidgraphix

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

cuboidgraphix

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

cuboidgraphix

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

wmguk

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information