You are viewing our Forum Archives. To view or take place in current topics click here.
[Help] Show / Hide Divs Based On Drop Down Menu Selection?
Posted:

[Help] Show / Hide Divs Based On Drop Down Menu Selection?Posted:

Cen
  • TTG Senior
Status: Offline
Joined: Nov 29, 201112Year Member
Posts: 1,637
Reputation Power: 70
Status: Offline
Joined: Nov 29, 201112Year Member
Posts: 1,637
Reputation Power: 70
Here is my code right now


<html>
<head>
-- Javascript --
</head>
<body>
<select id="selectMe">
    <option value="option1">(VS) New York Rangers @TDG Dec2</option>
    <option value="option2">(VS) Montreal @TDG Dec4</option>
    <option value="option3">(VS) Carolina @CMC Dec9</option>
    <option value="option4">(VS) Vancouver @TDG Dec12</option>
</select>
<BR />
<div id="option1">
<i>Showing tickets for...<BR />
<H3>Bruins (VS) New York Rangers, TD Garden, Sat. Dec. 2, 2012</H3></i><BR />
<select>
    <option>S 231 R 14 S 1 - $49</option>
    <option>S 1 R 1 S 1 - $219</option>
    <option>S 42 R 1 S 8+9 - $194</option>
</select>
</div>
<div id="option2">
<i>Showing tickets for...<BR />
<H3>Bruins (VS) Montreal Canadiens, TD Garden, Mon. Dec. 4, 2012</H3></i><BR />
<select>
    <option>S 231 R 14 S 1 - $89</option>
    <option>S 1 R 1 S 1 - $299</option>
    <option>S 42 R 1 S 8+9 - $294</option>
</select>
</div>
<div id="option3">
<i>Showing tickets for...<BR />
<H3>Bruins (VS) Carolina Hurricanes, TD Garden, Sat. Dec. 9, 2012</H3></i><BR />
<font color="#DD0000">There are currently no seats avaliable for this game. </font>
</div>
<div id="option4">
<i>Showing tickets for...<BR />
<H3>Bruins (VS) Vancouver Canucks, TD Garden, Thu. Dec. 12, 2012</H3></i><BR />
<select>
    <option>S 231 R 14 S 1 - $199</option>
    <option>S 1 R 1 S 1 - $303</option>
    <option>S 42 R 1 S 8+9 - $499</option>
    <option>S 9 R 6 S 19 - $392</option>
</select>
</div>
</body>
</html>



How can I hide all other divs and only show one, based on the selection from the drop down menu?
#2. Posted:
MLP
  • TTG Contender
Status: Offline
Joined: Oct 26, 201013Year Member
Posts: 3,869
Reputation Power: 177
Status: Offline
Joined: Oct 26, 201013Year Member
Posts: 3,869
Reputation Power: 177
I'm no expert with this, but I think you would use Javascript to edit the CSS depending on which is selected.

I don't know how to do this, but this is a solution that can be used.
#3. Posted:
iyop45
  • Prospect
Status: Offline
Joined: Apr 15, 201113Year Member
Posts: 614
Reputation Power: 83
Status: Offline
Joined: Apr 15, 201113Year Member
Posts: 614
Reputation Power: 83
Ye, you can do that with javascript 'simple':
I wrote it up on jsfiddle for you to see:
[ Register or Signin to view external links. ]

Of course you may need to fiddle around with it etc like adding more to the script accordingly. I tried it out and it works fine enjoy.
#4. Posted:
Lic
  • TTG Senior
Status: Offline
Joined: Dec 09, 201112Year Member
Posts: 1,939
Reputation Power: 83
Status: Offline
Joined: Dec 09, 201112Year Member
Posts: 1,939
Reputation Power: 83
I saw some basic errors of you not closing your div's a common mistake, if that does not help i will help you out more i just skimmed over the code.

EDIT: Do you mean so there is not so many div's in your code if so just use CompoundNesting and then use CSS3 or make a class, if you dont know compound nesting go to [ Register or Signin to view external links. ]
#5. Posted:
Cen
  • TTG Senior
Status: Offline
Joined: Nov 29, 201112Year Member
Posts: 1,637
Reputation Power: 70
Status: Offline
Joined: Nov 29, 201112Year Member
Posts: 1,637
Reputation Power: 70
iyop45 wrote Ye, you can do that with javascript 'simple':
I wrote it up on jsfiddle for you to see:
[ Register or Signin to view external links. ]

Of course you may need to fiddle around with it etc like adding more to the script accordingly. I tried it out and it works fine enjoy.


Thank you, this worked. I tried multiple Javascript solution and the only one that worked was yours
#6. Posted:
iyop45
  • Prospect
Status: Offline
Joined: Apr 15, 201113Year Member
Posts: 614
Reputation Power: 83
Status: Offline
Joined: Apr 15, 201113Year Member
Posts: 614
Reputation Power: 83
Incendiary wrote
iyop45 wrote Ye, you can do that with javascript 'simple':
I wrote it up on jsfiddle for you to see:
[ Register or Signin to view external links. ]

Of course you may need to fiddle around with it etc like adding more to the script accordingly. I tried it out and it works fine enjoy.


Thank you, this worked. I tried multiple Javascript solution and the only one that worked was yours


No problem, though if you have any other issues with it feel free to PM me.
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.