SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: related selects

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    related selects

    having a bit of difficulty achieving what i need here, and wondering if anyone could assist me..

    im trying to create a system which shows/hides info depending on what select has been chosen...

    so for example

    <form name="cd_number">
    <SELECT NAME="cd_sng">
    <OPTION VALUE="1" >cd 1</OPTION>
    <OPTION VALUE="2">cd 2</OPTION>

    <div id="cd 1>
    all songs from cd 1>
    </div>
    <div id="cd 2>
    all songs from cd 2>
    </div>
    </SELECT>
    </form>

    so essentially when you select cd1 in the select it would show the div called cd1 and hide div called cd 2...and vice versa when you select cd2 in the select.

    any help would be appreciated...thanks
    discover song meanings and more http://www.music-explained.com

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    
    function el(id){ return document.getElementById(id);}
    function showHide() {
    for(var i = 1; i<3; i++)  {   
    el("cd"+i).style.display = ( el("selectid").selectedIndex ==i-1 ) ? "block" : "none";    
    }
    } 
    </script>
    <style type="text/css">
    div { display:none;}
    </style>
    <form name="cd_number">
    <SELECT NAME="cd_sng" id="selectid" onchange="showHide()">
    <OPTION VALUE="1" >cd 1</OPTION>
    <OPTION VALUE="2">cd 2</OPTION>
    </SELECT>
    
    <div id="cd1">
    all songs from cd 1>
    </div>
    <div id="cd2">
    all songs from cd 2>
    </div>
    
    </form>

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, that works perfectly...
    just wondering..how would you adapt this, so that <div id="cd1"> is intiially shown on page load.....
    discover song meanings and more http://www.music-explained.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    div { display:none;}
    change to
    #cd2 {display:none;}

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you bosko...that has worked
    discover song meanings and more http://www.music-explained.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •