www.webdeveloper.com
Results 1 to 3 of 3

Thread: I have a select tag with four options, then countless div's that need to be displayed

Hybrid View

  1. #1
    Join Date
    May 2014
    Posts
    3

    I have a select tag with four options, then countless div's that need to be displayed

    I think I have a pretty standard select, div, js setup:

    <select id="riverdale">
    <option value="opt1">Archie</option>
    <option value="opt2">Jughead</option>
    <option value="opt3">Betty</option>
    <option value="opt4">Veronica</option>
    </select>

    <div id="opt1">stuff about archie</div>
    <div id="opt2">stuff about jughead</div>
    <div id="opt3">stuff about betty</div>
    <div id="opt4">stuff about veronica</div>
    <div id="opt1">more stuff about archie</div>
    <div id="opt1">even more stuff about archie</div>
    <div id="opt4">more stuff about veronica</div>
    <div id="opt3">more stuff about betty</div>
    <div id="opt1">even way more stuff about archie</div>
    <div id="opt2">more stuff about jughead</div>

    <script type="text/javascript">
    $("#riverdale").change(function(){
    $("#" + this.value).show().hide();
    });
    $("#riverdale").change();
    </script>

    By default, the opt1 should be shown when the page opens and the user sees:

    stuff about archie
    more stuff about archie
    even more stuff about archie
    even way more stuff about archie

    If the user selects the Betty select dropdown, they will see:

    stuff about betty
    more stuff about betty

    Change the select option and all the stuff about archie becomes display:none to show the other character chosen. As you can see from my example, there will be countless div's, maybe hundreds or thousands, but no matter what, the div's that are displayed are the ones that match the select option.

    I can either get opt1 to display and nothing changes, or get all four character information displayed and the select does not function at all. Please help. Thanks.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,125
    Langba,

    A couple things.

    1. You can't have multiple ID's on a page. Use classes instead.
    2. I'm not sure what you're trying to do here: $("#" + this.value).show().hide();
    3. I've created a quick sample of how this could work here: http://codepen.io/anon/pen/xycwe
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Mar 2009
    Posts
    495
    This is not beautiful, but it does work, but no, it doesn't use jQuery. Please note that I have changed your HTML where the DIV's were given id's---you're not supposed to have more than one element in a page with the same id. Every "toggle-able" div has the class name display along with a class name specifying which person it belongs to.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Untitled Document</title>
    <script>
    
    function alter(){
       var source, all, visible, i, len, val;
       var source = document.getElementById('riverdale');
       val = source.value;
       all = document.getElementsByClassName('display');
       visible = document.getElementsByClassName(val);
       len = all.length;
       for(i = 0; i < len; i++){
         all[i].style.display = "none";
       }
       len = visible.length;
       for(i = 0; i < len; i++){
         visible[i].style.display = '';
       }
    }
       
       
    window.onload = function(){
       alter();
    }
    
    </script>    
    </head>
    
    <body>
    <select id="riverdale" onChange="alter()">
    <option value="opt1" select = "opt1">Archie</option>
    <option value="opt2">Jughead</option>
    <option value="opt3">Betty</option>
    <option value="opt4">Veronica</option>
    </select>
    
    <div class="opt1 display">stuff about archie</div>
    <div class="opt2 display">stuff about jughead</div>
    <div class="opt3 display">stuff about betty</div>
    <div class="opt4 display">stuff about veronica</div>
    <div class="opt1 display">more stuff about archie</div>
    <div class="opt1 display">even more stuff about archie</div>
    <div class="opt4 display">more stuff about veronica</div>
    <div class="opt3 display">more stuff about betty</div>
    <div class="opt1 display">even way more stuff about archie</div>
    <div class="opt2 display">more stuff about jughead</div>
    </body>
    </html>
    Last edited by Tcobb; 06-06-2014 at 05:24 PM. Reason: Some explanation needed

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles