By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,688 Members | 1,715 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,688 IT Pros & Developers. It's quick & easy.

Dynamic Select

The1corrupted
100+
P: 134
Hi all, I'm trying to get a dynamic select to work and so far, no luck. I've toyed around with it, poke it with a stick, and proclaim it dead. What I'm trying to do is display something when a certain option is selected. I know this code is dead wrong, but I'm here to fix that.

Expand|Select|Wrap|Line Numbers
  1. <select name="eyes" onChange="return color_select()">
  2.     <option selected>
  3.         -- Choose Color --
  4.     </option>
  5.     <option value="1">
  6.         Monocolored
  7.     </option>
  8.     <option value="2">
  9.         Multicolored
  10.     </option>
  11. </select>
  12.  
  13. <script language="javascript">
  14. function color_select() {
  15.     var col=document.sign.eye.selectedIndex;
  16.  
  17.     if (var col=="1") {
  18.          document.write("<select name='eyecolor'>"+"<option>color</option>");
  19.         return true;
  20.     }
  21.  
  22.     if (var col=="2") {
  23.         document.write("<select name='eyecolor'>"+"<option>color</option>");
  24.         return true;
  25.     }
  26. }
  27. </script>
Jun 20 '07 #1
Share this Question
Share on Google+
8 Replies


Atli
Expert 5K+
P: 5,058
Ok, well first, HTML is a horrobly linear thing, so the function has to be declared before you can call it.
So you need create the function before you create the select tag.

You only need to use 'var' when you declair variables, not when you use them. So you will need to remove the 'var' prefix from the 'col' variables in the if statements.

You can pass variables through to the function adding a parameter, and then when you call the function from teh select tag, you can put 'this.value' as a parameter and it vill return the value of the selected option. This way your function is not attached to a specific tag, and can be reused by other elements.

I rewrote your code to demonstrate what I mean:
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2. function color_select(value) {     
  3.     if (value=="1") {
  4.         document.body.bgColor = "#A5A5A5";
  5.     }
  6.  
  7.     if (value=="2") {
  8.         document.body.bgColor = "#AA3388";
  9.     }
  10. }
  11. </script>
  12. <select id="eyes" name="eyes" onChange="return color_select(this.value)">
  13.     <option selected>
  14.         -- Choose Color --
  15.     </option>
  16.     <option value="1">
  17.         Monocolored
  18.     </option>
  19.     <option value="2">
  20.         Multicolored
  21.     </option>
  22. </select>
  23.  
Jun 20 '07 #2

The1corrupted
100+
P: 134
Aye, I realize this. I'm new to JScript so what would really help is a functioning way to display the drop down select menu. I've looked at the document.bgcolor and all but it doesn't exactly do what I want... nor does it function.
Jun 20 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Are you trying to display another select dropdown when an option is selected?
Jun 20 '07 #4

The1corrupted
100+
P: 134
Yes, I am. This is for an online game in which you select a monocolored or multicolored eyes. Which also means that I need a little thing to change as options are selected.

Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" value="0">
I need that value to change to "1" when multicolored is selected...
Jun 20 '07 #5

acoder
Expert Mod 15k+
P: 16,027
Where do you want this select element to appear?

Give your hidden element an id and change it to "1" using:
Expand|Select|Wrap|Line Numbers
  1. if (col == 2) document.getElementById('hidden').value = "1";
Jun 20 '07 #6

The1corrupted
100+
P: 134
Well, granted that will work, I have some sample code pulled from a site and it would do what I want, but sadly, it doesn't work.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <form name="myform"><div align="center">
  6. <select name="optone" size="1"
  7. onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
  8. <option value="" selected="selected"> </option>
  9. <option value="1">First Choice</option>
  10. <option value="2">Second Choice</option>
  11. <option value="3">Third Choice</option>
  12. </select><br /> <br />
  13. <select name="opttwo" size="1">
  14. <option value=" " selected="selected">Please select one of the options above first</option>
  15. </select>
  16. <input type="button" name="go" value="Value Selected"
  17. onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
  18. </div>
  19. </form>
  20. </body>
  21. </html>
  22.  
Jun 20 '07 #7

rnd me
Expert 100+
P: 427
here is the problem:

on your first example, the onchange event for the dropdown.

return color_select(this.value)"


try:

return color_select(this.selectedIndex)

select.value is weird, and not browser std in my exp...
Jun 21 '07 #8

100+
P: 210
Yes, I am. This is for an online game in which you select a monocolored or multicolored eyes. Which also means that I need a little thing to change as options are selected.

Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" value="0">
I need that value to change to "1" when multicolored is selected...
That's two entirely separate scripts. For the cascaded select boxes, this script tries to make it as simple as possible.
Give the hidden element an id, say 'multiColor', then say the option value is "multicolored", configure the relevant select thus:

Expand|Select|Wrap|Line Numbers
  1. <select onchange='document.getElementById("multiColor")=(this.value=="multicolored"?1:0)' .......>
  2.  
I think that'll work.
Jun 21 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.