Member Avatar for AboJaD

Hello,

i have eleven drop down lists, one of them is main, and from the ten other lists only one should be visible. What i am doing is when i choose one option from the main select box, one of the ten other boxes becomes visible depending on which i choose, i tried onclick in the option tag but it didn't work, i tried onchange in the select tag also doesn't work.

Here is the code i have:

<script type="text/javascript">
        /*<![CDATA[*/
        function searchList()
{
if(this.options[this.selectedIndex].value=='-1') Disconnect();
if(this.options[this.selectedIndex].value=='1') B1();
if(this.options[this.selectedIndex].value=='2') C1();
if(this.options[this.selectedIndex].value=='3') E1();
if(this.options[this.selectedIndex].value=='4') G1();
if(this.options[this.selectedIndex].value=='5') I1();
if(this.options[this.selectedIndex].value=='6') J1();
if(this.options[this.selectedIndex].value=='7') M1();
if(this.options[this.selectedIndex].value=='8') O1();
if(this.options[this.selectedIndex].value=='9') S1();
if(this.options[this.selectedIndex].value=='10') S2();
};

function Disconnect()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="block";
};

function B1()
{
document.getElementById("S_B1").style.display="block";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="none";
};

function C1()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="block";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="none";
};

function E1()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="block";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="none";
};

function G1()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="block";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="none";
};

function I1()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="block";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="none";
};

function J1()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="block";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="none";
};

function M1()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="block";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="none";
};

function O1()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="block";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="none";
};

function S1()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="block";
document.getElementById("S_S2").style.display="none";
document.getElementById("Closed").style.display="none";
};

function S2()
{
document.getElementById("S_B1").style.display="none";
document.getElementById("S_C1").style.display="none";
document.getElementById("S_E1").style.display="none";
document.getElementById("S_G1").style.display="none";
document.getElementById("S_I1").style.display="none";
document.getElementById("S_J1").style.display="none";
document.getElementById("S_M1").style.display="none";
document.getElementById("S_O1").style.display="none";
document.getElementById("S_S1").style.display="none";
document.getElementById("S_S2").style.display="block";
document.getElementById("Closed").style.display="none";
};
        /*]]>*/
        </script>
        <style type="text/css">
        /*<![CDATA[*/
          body {text-align:center;margin:0}
          select.SI {display:none}
          select.Closed {display:block}
        /*]]>*/
        </style>

<select name="groups" onchange="searchList()">
       <option id="-1" value="-1">Select Category:</option>
       <option id="B1" value="1">Business</option>
       <option id="C1" value="2">Common Interest</option>
       <option id="E1" value="3">Entertainment & Arts</option>
       <option id="G1" value="4">Georgraphy</option>
       <option id="I1" value="5">Internet & Technology</option>
       <option id="J1" value="6">Just for Fun</option>
       <option id="M1" value="7">Music</option>
       <option id="O1" value="8">Organizations</option>
       <option id="S1" value="9">Sports & Recreaction</option>
       <option id="S2" value="10">Student Groups</option>
       </select>
       <select class="Closed" disabled="disabled" style="width: 140px" id="Closed">
       <option id="-1">Select Category:</option>
       </select>
       <select class="SI" id="S_B1">
       <option id="-1">Select Type:</option>
       <option id="1">Companies</option>
       <option id="2">Consumer Groups</option>
       <option id="3">Employment & Work</option>
       <option id="4">General</option>
       <option id="5">Home Business</option>
       <option id="6">Investing</option>
       <option id="7">Marketing & Advertising</option>
       <option id="8">Public Relations</option>
       <option id="9">Real Estate</option>
       </select>
       <select class="SI" id="S_C1">
       <option id="-1">Select Type:</option>
       <option id="10">Activities</option>
       <option id="11">Age</option>
       <option id="12">Beauty</option>
       <option id="13">Beliefs & Causes</option>
       <option id="14">Current Events</option>
       <option id="15">Dating & Relationships</option>
       <option id="16">Families</option>
       <option id="17">Food & Drinks</option>
       <option id="18">Friends</option>
       <option id="19">Gardening</option>
       <option id="20">Health & Wellness</option>
       <option id="21">History</option>
       <option id="22">Hobbies & Crafts</option>
       <option id="23">Languages</option>
       <option id="24">Pets & Animals</option>
       <option id="25">Philosophy</option>
       <option id="26">Politics</option>
       <option id="27">Relogion & Spirituality</option>
       <option id="28">Science</option>
       <option id="29">Self-help</option>
       <option id="30">Sexuality</option>
       <option id="31">Travel</option>
       <option id="32">Wine</option>
       </select>
       <select class="SI" id="S_E1">
       <option id="-1">Select Type:</option>
       <option id="33">Books & Literature</option>
       <option id="34">Celebrities</option>
       <option id="35">Comics & Animation</option>
       <option id="36">Dance</option>
       <option id="37">Fashion</option>
       <option id="38">Fine Arts</option>
       <option id="39">General</option>
       <option id="40">Humor</option>
       <option id="41">Movies</option>
       <option id="42">Nightlife</option>
       <option id="43">Online Media</option>
       <option id="44">Performing Arts</option>
       <option id="45">Radio</option>
       <option id="46">Television</option>
       <option id="47">Theater</option>
       </select>
       <select class="SI" id="S_G1">
       <option id="-1">Select Type:</option>
       <option id="48">Cities</option>
       <option id="49">Countries</option>
       <option id="50">General</option>
       <option id="51">Neighborhoods</option>
       <option id="52">Places</option>
       <option id="53">Regions</option>
       <option id="54">Ridesharing & Transportation</option>
       <option id="55">States</option>
       </select>
       <select class="SI" id="S_I1">
       <option id="-1">Select Type:</option>
       <option id="56">Computers & Hardware</option>
       <option id="57">Cyberculture</option>
       <option id="58">Gadgets</option>
       <option id="59">Gaming</option>
       <option id="60">General</option>
       <option id="61">Languages & Formats</option>
       <option id="62">Mobile</option>
       <option id="63">Multimedia</option>
       <option id="64">News</option>
       <option id="65">Software</option>
       <option id="66">Websites</option>
       </select>
       <select class="SI" id="S_J1">
       <option id="-1">Select Type:</option>
       <option id="67">Genepit Classics</option>
       <option id="68">Fan Clubs</option>
       <option id="69">Inside Jokes</option>
       <option id="70">Outlandish Statements</option>
       <option id="71">Too Much Information</option>
       <option id="72">Totally Pointless</option>
       <option id="73">Totally Random</option>
       </select>
       <select class="SI" id="S_M1">
       <option id="-1">Select Type:</option>
       <option id="74">Blues</option>
       <option id="75">Country</option>
       <option id="76">Electronic</option>
       <option id="77">General</option>
       <option id="78">Indie</option>
       <option id="79">Instruments</option>
       <option id="80">International</option>
       <option id="81">Jazz</option>
       <option id="82">Latin</option>
       <option id="83">Live Music</option>
       <option id="84">Metal</option>
       <option id="85">R&B & Soul</option>
       <option id="86">Rap & Hip Hop</option>
       <option id="87">Reggae</option>
       <option id="88">Religious</option>
       <option id="89">Rock</option>
       <option id="90">Songwriting</option>
       <option id="91">Classical</option>
       <option id="92">Folk</option>
       <option id="93">Dance</option>
       </select>
       <select class="SI" id="S_O1">
       <option id="-1">Select Type:</option>
       <option id="94">Academic Organizations</option>
       <option id="95">Advocacy Organizations</option>
       <option id="96">Clubs & Societies</option>
       <option id="97">Community Organizations</option>
       <option id="98">General</option>
       <option id="99">Non-Profit Organizations</option>
       <option id="100">Philanthropic Organizations</option>
       <option id="101">Political Organizations</option>
       <option id="102">Professional Organizations</option>
       <option id="103">Religious Organizations</option>
       <option id="104">Volunteer Organizations</option>
       </select>
       <select class="SI" id="S_S1">
       <option id="-1">Select Type:</option>
       <option id="105">Automotive & Racing</option>
       <option id="106">Cheerleading</option>
       <option id="107">College Sports</option>
       <option id="108">Dance</option>
       <option id="109">Extreme Sports</option>
       <option id="110">Fantasy Sports</option>
       <option id="111">Fitness & Exercise</option>
       <option id="112">Gambling</option>
       <option id="113">Games</option>
       <option id="114">General Sports</option>
       <option id="115">High School Sports</option>
       <option id="116">International Sports</option>
       <option id="117">Intramural Sports</option>
       <option id="118">Marial Arts</option>
       <option id="119">Olympic Sports</option>
       <option id="120">Outdoor Sports</option>
       <option id="121">Professional Sports</option>
       <option id="122">Recreational Sports</option>
       <option id="123">Sports Leagues</option>
       <option id="124">Water Sports</option>
       <option id="125">Weightlifiting & Bodybuilding</option>
       <option id="126">Winter Sports</option>
       <option id="127">Yoga</option>
       </select>
       <select class="SI" id="S_S2">
       <option id="-1">Select Type:</option>
       <option id="128">Abroad/Overseas Groups</option>
       <option id="129">Academic Groups</option>
       <option id="130">Advising Groups</option>
       <option id="131">Alumni Groups</option>
       <option id="132">Classes & Departments</option>
       <option id="133">Clubs & Societies</option>
       <option id="134">Community Groups</option>
       <option id="135">Creative Arts Groups</option>
       <option id="136">Dorms & Residences</option>
       <option id="137">Ethnic/Cultural Groups</option>
       <option id="138">Fraternities Sororities</option>
       <option id="139">General</option>
       <option id="140">Media/Public Groups</option>
       <option id="141">Musical Groups</option>
       <option id="142">Political Groups</option>
       <option id="143">Pre-Professional Groups</option>
       <option id="144">Religious Groups</option>
       <option id="145">Service Groups</option>
       <option id="146" id="1">Social Groups</option>
       <option id="147">Student Government</option>
       <option id="148">Study Groups</option>
       </select>

Any help is appreciated, Thank You

Edited by AboJaD because: n/a
  • 2 Contributors
  • 1 Reply
  • 160 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

AboJaD,

The solution can be quite concise.

Delete the entire script (sorry) and paste in this:

onload = function(){
	var menus = ['Closed', 'S_B1', 'S_C1', 'S_E1', 'S_G1', 'S_I1', 'S_J1', 'S_M1', 'S_O1', 'S_S1', 'S_S2'];//list of secondary menu ids
	for(var i=0; i<menus.length; i++) {
		menus[i] = document.getElementById(menus[i]);//translate ids into DOM elements
	}
	var groups = document.getElementById('groups');
	if(groups){
		groups.onchange = function(){
			var val = Number(this.options[this.selectedIndex].value);//read value and cast it as a Number.
			for(var i=0; i<menus.length; i++) {
				if(menus[i]) {
					menus[i].style.display = ((val===i) ? 'block' : 'none');// hide all secondary menus except the menu of interest.
					menus[i].selectedIndex = 0;// (optional) reinitialise menu in case it was previously selected by the user.
				}
			}
		};
	}
};

You also need to make changes to the groups menu:

<select id="groups" name="groups">
       <option value="0">Select Category:</option>
       <option value="1">Business</option>
       <option value="2">Common Interest</option>
       <option value="3">Entertainment & Arts</option>
       <option value="4">Georgraphy</option>
       <option value="5">Internet & Technology</option>
       <option value="6">Just for Fun</option>
       <option value="7">Music</option>
       <option value="8">Organizations</option>
       <option value="9">Sports & Recreaction</option>
       <option value="10">Student Groups</option>
</select>

NOTES:

  • Added id="groups"
  • onchange="....." is removed. The function is now attached by the script.
  • The value of the first option is changed from -1 to 0. This allows the javascript simpler.
  • The options' ids are purged as they appeared to be unnecessary. But you can put them back if you need them for some other purpose.

Airshow

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.