Hide Options in Select List

@Trek7553Jan 18.2012

Hello,

I am trying to conditionally show/hide options in a select list based on the choice in another list.

Unfortunately, the page I am using is a static system generated page and I can only add javascript to the header.

The format is:

<select name=”uniquename2″ id=”uniqueid2″>
<option selected =”select” value = “0”></option>
<option value=”1″>Conditionally show this</option>
<option value=”2″>Conditionally show and this</option>
<option value=”3″>Conditionally show and maybe this</option>
</select>

I have very little experience with javascript, but I understand basic programming concepts. Is this even possible? My difficulty was that I couldn’t figure out how to use OnChange() without being able to access that select element.

Any help would be great.

Thank you!

to post a comment

JavaScript

7 Comments(s) _↴

@xelawhoJan 19.2012 — #I'm not sure what you mean by "conditionally show" - do you want to get rid of them altogether on changing the first select, or do you want them to appear and disappear as the selections change?

here's something to play around with, anyway...

[CODE]
 <html>
 <head>
 <script>
 window.onload =function(){ 
 document.getElementById("uniqueid1").onchange=function() { 
 ind=this.selectedIndex;
 sel2=document.getElementById("uniqueid2")
 switch(ind){ 
 case 1:
 sel2.options.length=4
 break;
 case 2:
 sel2.options.length=3;
 break;
 case 3:
 sel2.options.length=2;
 break;
 } 
 } 
 } 
 </script>
 </head>
 <body>
 <select name="uniquename1" id="uniqueid1">
 <option selected ="select" value = "0"></option>
 <option value="100">Text1</option>
 <option value="200">Text2</option>
 <option value="300">Text3</option>
 </select>
 
 <select name="uniquename2" id="uniqueid2">
 <option selected ="select" value = "0"></option>
 <option value="1">Conditionally show this</option>
 <option value="2">Conditionally show and this</option>
 <option value="3">Conditionally show and maybe this</option>
 </select>
 </body>
 </html>
 [/CODE]

@Trek7553authorJan 19.2012 — #Thanks so much for replying.

I should have been more clear, the second list has about 45 entries that are hardcoded on the page. Depending on which of the three choices the user makes in the first field, only a subset of those options should be available to them in the second.

I'll take a look at your code tomorrow, but I'm not great with javascript. Is that what it does?

Thanks!

@xelawhoJan 19.2012 — #not really... in a crude kind of way it does. But the main question is, will the user be able to change the choice they made in the first select? because if not, it's easy enough, but this way deletes those options in the second select forever which may not be what you want... otherwise, it's just a matter of dependent select boxes, like you see here

[CODE]
 <html>
 <head>
 <script>
 window.onload =function(){ 
 document.getElementById("uniqueid1").onchange=function() { 
 ind=this.selectedIndex;
 sel2=document.getElementById("uniqueid2")
 opts=sel2.options
 switch(ind){ 
 case 1:
 dels=[1,3,5]
 break;
 case 2:
 dels=[5,7,9]
 break;
 case 3:
 dels=[2,4,6]
 break;
 } 
 for (i = dels.length - 1; i>=0; i--) {
 opts.remove(dels[i])
 }
 } 
 } 
 </script>
 </head>
 <body>
 <select name="uniquename1" id="uniqueid1">
 <option selected ="select" value = "0"></option>
 <option value="100">Text1</option>
 <option value="200">Text2</option>
 <option value="300">Text3</option>
 </select>
 
 <select name="uniquename2" id="uniqueid2">
 <option selected ="select" value = "0"></option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
 <option value="5">Five</option>
 <option value="6">Six</option>
 <option value="7">Seven</option>
 <option value="8">Eight</option>
 <option value="9">Nine</option>
 <option value="10">Ten</option>
 </select>
 </body>
 </html>[/CODE]

@Trek7553authorJan 19.2012 — #Yes, the user will be able to change their selection. The example that you linked to is perfect and gets me a long way towards what I'm trying to do.

The only piece that is missing is that I'm stuck with the existing select and associated list of options on the page. Is there a way to hide that and insert a new one using an array like in the example?

If so, how do I add the value to the array (in addition to the description)? When the form is submitted, the value is important and gets sent to our server.

My situation is kind of odd in that I am not able to edit the html at all. If I could, I would just copy the example and replace the values.

I hope my explanation makes sense, I really appreciate the help.

Thanks again.

@xelawhoJan 19.2012 — #I'm not sure I understand where you're stuck, but see if this works for you...

[CODE]
 <html>
 <head>
 <title></title>
 <script type="text/javascript">
 
 window.onload=function () {
 document.getElementById("uniqueid1").onchange=function () {numChange(this)}
 document.getElementById("uniqueid2").onchange=function () {alert(this.value)}
 }
 // array of possible choices in the same order as they appear in the first select list
 var NumLists = new Array(5)
 NumLists["empty"] = ["Select a number"];
 NumLists["odds"] = [["one","uno"],["three","tres"],["five","cinco"]];
 NumLists["evens"] = [["two","dos"],["four","cuatro"],["six","seis"]];
 NumLists["threes"] = [["three","tres"],["six","seis"],["nine","nueve"]];
 NumLists["all"]= [["one","uno"],["two","dos"],["three","tres"],["four","cuatro"],["five","cinco"],["six","seis"],["seven","siete"],["eight","ocho"],["nine","nueve"],["ten","diez"]];
 /* numChange() is called from the onchange event of a select element.
 * param selectObj - the select object which fired the on change event.
 */
 function numChange(selectObj) {
 // get the index of the selected option
 var idx = selectObj.selectedIndex;
 
 
  // get the value of the selected option
  var which = selectObj.options[idx].value;
  // use the selected option value to retrieve the list of items from the numLists array
  cList = NumLists[which];
  // get the second select element via its known id
  var cSelect = document.getElementById("uniqueid2");
  // remove the current options from the second select
  var len=cSelect.options.length;
  while (cSelect.options.length > 0) {
   cSelect.remove(0);
  }
  var newOption;
  // create new options
  for (var i=0; i<cList.length; i++) {
   newOption = document.createElement("option");
   newOption.value = cList[i][1]; 
   newOption.text=cList[i][0];
   // add the new option
   try {
   cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE
   }
   catch (e) {
   cSelect.appendChild(newOption);
 
   }
  }
 }
 </script>
 </head>
 <body>
 <select name="uniquename1" id="uniqueid1">
 <option selected ="select" value = "0">Select one</option>
 <option value="odds">Odds</option>
 <option value="evens">Evens</option>
 <option value="threes">Threes</option>
 <option value="all">All</option>
 </select>
 <br />
 <select name="uniquename2" id="uniqueid2">
 <option selected ="select" value = "0"></option>
 <option value="uno">One</option>
 <option value="dos">Two</option>
 <option value="tres">Three</option>
 <option value="cuatro">Four</option>
 <option value="cinco">Five</option>
 <option value="seis">Six</option>
 <option value="seite">Seven</option>
 <option value="ocho">Eight</option>
 <option value="nueve">Nine</option>
 <option value="diez">Ten</option>
 </select></body>
 
 </html>
 [/CODE]

To include the values it seems best to make the options into sub-arrays, the first element being the text, the second the value.

If all that clogs up your head too much, you can dump all of that code (without the script tags) into a separate .js file and include it by adding this to your head section:
[CODE]<script type="text/javascript" src="select.js"></script>[/CODE]

(where select.js is the pathname of your js file)

I added an alert for the onchange on the second list so you can check that your values are coming up correct - but that's easy to remove.

hope that helps.

@007JulienJan 19.2012 — #Only a suggestion : You can too disabled an ore more options...

@Trek7553authorJan 20.2012 — #Thank you so much for the guidance, that was exactly what I was looking for. I was able to add this to our static page header and it performed perfectly.

Thanks again!

Also in #JavaScript _↴

How do I save and retreive variables with Jquery?[RESOLVED] Script wont start Slider Javascript Height Problem

Success!

Help @Trek7553 spread the word by sharing this article on Twitter...

Tweet This

Hide Options in Select List

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Hide Options in Select List

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴