Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Show/Hide DIV on change of SELECT OPTION 4

Status
Not open for further replies.
rockyroad

rockyroad

Programmer
Feb 22, 2003
191
US
Hello,

I have sucessfully implemented a script that will show/hide a DIV of content depending on which radio button in a form is selected...

I am looking for a script, or a resource, or some direction on how to do the same, only with <select> menu... when a specific <option> from a <select> form menu is selected... so that in a form, if the user selects option "foo" from a dropdown menu, the hidden div will appear, and if anything else is selected, the hidden div will remain hidden.

Any help would be greatly appreciated.

Thanks!

RR
 
Sort by date Sort by votes
here's a quick method to implement... selectedIndex == 1 means "if the second item is selected". (0 is the first item).

Code: 
<select onchange="if ( this.selectedIndex == 1 ) {[i][green]enter your existing code/function call here[/green][/i]}">



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Hi,

I see what you are saying... problem is, I am getting all of my <option> values from a query from the database (sorry I didn't mention that before :-0 )

Thanks
 
Upvote 0 Downvote
then do something like this:

Code: 
<select onchange="if ( this.options[this.selectedIndex].value == 'WHATEVER VALUE' ) {[green][i][tt]enter your existing code/function call here[/tt][/i][/green]}">



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Have a look at this example I just wrote:

Code: 
<html>
<head>
  <title>Select DIV to show</title>
  <script type="text/javascript">
    function show(obj) {
      no = obj.options[obj.selectedIndex].value;
      count = obj.options.length;
      for(i=1;i<count;i++)
        document.getElementById('myDiv'+i).style.display = 'none';
      if(no>0)
        document.getElementById('myDiv'+no).style.display = 'block';
    }
  </script>
</head>
<body>
  <form name="myForm">
    <select onchange="show(this)">
      <option value="0">Select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </form>
  <div id="myDiv1" style="display:none">One</div>
  <div id="myDiv2" style="display:none">Two</div>
  <div id="myDiv3" style="display:none">Three</div>
</body>
</html>

Regards

;-)
 
Upvote 0 Downvote
Thanks for your help thus far (everyone gets a star as far as I am concerned), I am trying to figure this out and apply to my task, but I am still having problems. See my code - what is the problem with it?

Code: 
<html>
<head>
  <title>Select DIV to show</title>
  <script type="text/javascript">
    function show() {
      if(document.myForm.Colors.options[this.selectedIndex].value == 'Green');
        document.ShowGreen.style.display = 'block';
	}
      else
        {document.ShowGreen.style.display = 'none';}
    }
  </script>
</head>
<body>
  <form name="myForm">
    <select name="Colors" onchange="show()">
      <option value="">Select</option>
      <option value="Green">Green</option>
      <option value="Blue">Blue</option>
      <option value="Orange">Orange</option>
    </select>
  </form>
  <div id="ShowGreen" style="display:none">This is the hidden div</div>
</body>
</html>

THANKS AGAIN!!!!
 
Upvote 0 Downvote
Hi,

I tried this, changed
Code: 
if(document.myForm.Colors.option[this.selectedIndex].value == 'Green');
to
Code: 
if(document.myForm.Colors.options[document.myForm.Colors.selectedIndex].value == 'Green');

but it still doesn't work, throws error "object expected"
Thanks again,

RR
 
Upvote 0 Downvote
Be careful, in the previous script there is another mistake.
[tt] if(document.myForm.Colors.options[this.selectedIndex].value == 'Green')[highlight];[/highlight][/tt]
[tt] if(document.myForm.Colors.options[[blue]document.myForm.Colors.[/blue]selectedIndex].value == 'Green')[red]{[/red][/tt]
 
Upvote 0 Downvote
Code: 
function show() {
      if(document.myForm.Colors.options[document.myForm.Colors.selectedIndex].value == 'Green'){
        document.getElementById('ShowGreen').style.display='block';
    }
      else
        {document.getElementById('ShowGreen').style.display='none';}
    }
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
768
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
720
xwb
xwb
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
664
malpa
malpa
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
584
TheLazyPig
TheLazyPig

Part and Inventory Search

Sponsor

Back
Top