SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Selectbox jquery selector problem

    Hi

    This is my first visit to Sitepoint, it looks a really helpful place

    I am learning how to javascript and jquery and figured best way to learn is by dealing with real life problems, so heres my first one.

    To show you what i've done i've uploaded a test file here

    http://www.harshadpatel.co.uk/selectbox/

    As you can see i have done a page with two jump menus, as I cant style selects properly, I've attempted to spit them out as li's so i can style them so I have got up to this point, the problem i have is that the top menu it should only say 1, 2, 3 and the bottom one 4, 5, 6 at the moment it spits it out as 1,2,3,4,5,6 on both menus.

    This is the html

    Code:
    <form name="join-us-home" class="join-us-home">    
        <select class="menu">
            <option value="value-1">1</option>
            <option value="value-2">2</option>
            <option value="value-3">3</option>
        </select>
        <input type="submit" value="Go" />
    </form>
    
    
    <form name="join-us-home" class="join-us-home">    
        <select class="menu">
            <option value="value-4">4</option>
            <option value="value-5">5</option>
            <option value="value-6">6</option>
        </select>
        <input type="submit" value="Go" />
    </form>
    and the JS is this

    Code:
    <script type="text/javascript">
        $(document).ready(function () {
            var list = $('<ul>');
            $('.menu option').each(function () {
                $('select').hide();
                var test = $(this).attr('value');
                var text = $(this).text();
                $('<li><a href="' + test + '">' + text + '</a></li>').appendTo(list);
            });
            list.insertBefore($('input'));
    
            $('.join-us-home').submit(function () {
                window.location = $('.menu', $(this)).val();
                return false;
            });
        });
    </script>
    i think the selector is wrong, but i am a bit stuck here, any pointers would be greatly appreciated

    Thanks again,


    harshyp

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    And welcome to the forums!

    I had a look at your code.
    The problem is that you are creating your unordered list (with six list items), then you are inserting it twice (once before each input element).

    Here are a couple of observations to your code:
    • var list = $('<ul>'); - here you are telling jQuery to get all of the <ul> tags it can find on the page. However, there are none.
    • $('.menu option').each(function () { - here you are finding any elements with the class 'menu', getting a reference to each <option> tag contained within these element and attaching a function to it. This in itself is fine.
    • $('select').hide(); - however, for each <option> tag jQuery finds, it will now try and find all the <select> tags within the document and hide them. This should not be within the loop, as it only needs to be done once.
    • list.insertBefore($('input')); - This is what's causing the list to display twice. jQuery is getting a reference to both input tags in the document (the two submit buttons) and inserting the list it has just created before them.
    So, I rewrote yourcode a little. I gave each <select> element a unique id. Now, this should more or less do what you want:

    HTML Code:
    <!DOCTYPE html>
      <html>
        <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset=utf-8 />
        <title>Sliderbox test</title>
      </head>
      
      <body>
        <form name="join-us-home" class="join-us-home">    
          <select class="menu" id="first">
            <option value="value-1">1</option>
            <option value="value-2">2</option>
            <option value="value-3">3</option>
          </select>
          <input type="submit" value="Go" />
        </form>
        
        <form name="join-us-home" class="join-us-home">    
          <select class="menu" id="second">
            <option value="value-4">4</option>
            <option value="value-5">5</option>
            <option value="value-6">6</option>
          </select>
          <input type="submit" value="Go" />
        </form>
        
        <script type="text/javascript">
          $(document).ready(function () {
            var list1 = "<ul>"
            $("#first option").each(function(){
              list1 += '<li><a href="' + this.value + '">' + this.text + '</a></li>';
            });
            list1 += "</ul>";
            $("#first").replaceWith(list1);
            
            // Rinse and repeat
            var list2 = "<ul>"
            $("#second option").each(function(){
              list2 += '<li><a href="' + this.value + '">' + this.text + '</a></li>';
            });
            list2 += "</ul>";
            $("#second").replaceWith(list2);
          });
        </script>
      </body>
    </html>
    My only remaining question is: is there any reason you didn't use list items in the first place?
    I'm not sure how you are intending to submit your form with this approach.

    Nonetheless, I hope this helps you.
    If you have any questions, just let me know.

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Pullo many thanks for your reply, I've learned some new things there such as replaceWith didnt know you could that, many thanks for showing me this yes thats what i wanted to do, id's crossed my mind however i thought as it was a separate item it would do everything that was in that select but this isnt the case, in terms of the purpose there are some sites I am building in the future use jump menus to navigate parts of the site, so its going to work as a jump menu but using li's to get better styling, the user selects an item from the drop down and then presses "Go" to navigate to that page thanks for your help I am i think 50% there, I am gonna try this weekend to implement the other half

  4. #4
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo finally got round to adding some more script to make the jumpmenu work correctly, its now looking like this http://www.harshadpatel.co.uk/selectbox/ and its now working correctly, many thanks for your help Pullo in helping me with this , the next thing i want to do is make it more modular so it can be dropped easily into any pagee and I am going to try and turn this into a plugin as i havent done one and is something i need to learn Just one question if i want to use classes instead of id's to seperate the menu items is this possible?

    I've got a lot to learn but i think i am making some progress

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Nice one! I'm glad you've got things working.

    Quote Originally Posted by harshyp View Post
    Just one question if i want to use classes instead of id's to seperate the menu items is this possible?
    Sure. You would do this:

    Code JavaScript:
    var sel = $(".menu")
    This gives you an array of items wit the class menu. You can then iterate over them like this:

    Code JavaScript:
    sel.each(function(){console.log(this);})

    Does that help?

  6. #6
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Pullo many thanks for your reply, I'll definitely give it a try and post back

  7. #7
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Pullo

    I had some upload issues yesterday, I've given your code a try I must have done it wrong as its now undefining

    Code:
    			var sel = $(".menu")
                var list1 = "<ul class='firstmenu'><li><span class='intro'>Please select from the dropdown menu below</span><ul id='list-one'>"
    			//sel.each(function(){console.log(this);})
                sel.each(function () {
                   list1 += '<li><a href="' + this.value + '">' + this.text + '</a></li>';
                });
                list1 += "</ul></li></ul>";
                $(sel).replaceWith(list1);

  8. #8
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i forgot to say i've uploaded it as well. http://www.harshadpatel.co.uk/selectbox/

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi there harshyp,

    Quote Originally Posted by harshyp View Post
    I had some upload issues yesterday, I've given your code a try I must have done it wrong as its now undefining
    Yeah, the problem with your code is that this:

    Code JavaScript:
    var sel = $(".menu")
    returns an array of items with the class "menu".

    And when you iterate over them like so:

    Code JavaScript:
    sel.each(function(){ ... do some stuff ...})
    this will reference a <select> element, not the <option> elements contained within it.

    So, doing this:

    Code JavaScript:
    list1 += '<li><a href="' + this.value + '">' + this.text + '</a></li>';
    will of course return undefined, as the <select> element, doesn't have a value attribute or text() method.

    So what you should do within the function passed to each, is to get all of the children of the select element (the <option> elements), so that you can manipulate them in some way.
    You can do this with the map() function, like this:

    Code JavaScript:
    $(this).children().map(function() {
      list1 += '<li><a href="' + $(this).val() + '">' + $(this).text() + '</a></li>';
    }).get();

    Here is a complete example for you to have a play around with:

    HTML Code:
    <!DOCTYPE html>
      <html>
        <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset=utf-8 />
        <title>Sliderbox test</title>
        <style type="text/css">
            form ul {float: left;}
            form ul, li {list-style: none; margin: 0; padding: 0;}
            form li span.intro {background-color: #000; border-bottom: #fff 1px solid; color: #fff; padding: 10px; display: block; width: 300px;}
            form li span.intro:hover {cursor: both;}
            form p {display: block; width: 200px; padding: 5px 0; margin: 0; background-color: #ccc; border-bottom: #000 1px solid;}
            form ul li a {width: 300px; padding: 5px 0; background-color: #ccc; border-bottom: #000 1px solid; display: block; padding: 10px;}
            form ul li ul {display: none;}
            form ul li:hover ul {display: block;}
            .no-display {display: none;}
            input[type="submit"]{ float: left;}
        </style>
      </head>
     
      <body>
        <form id="join-us-homey">    
          <select class="menu" id="first">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <input type="submit" value="Go" />
        </form>
        
        <script type="text/javascript">
          $(document).ready(function () {
            var sel = $(".menu")
            var list1 = "<ul class='firstmenu'><li><span class='intro'>Please select from the dropdown menu below</span><ul id='list-one'>"
            sel.each(function () {
              $(this).children().map(function() {
                list1 += '<li><a href="' + $(this).val() + '">' + $(this).text() + '</a></li>';
              }).get();
            });
            list1 += "</ul></li></ul>";
            $(sel).replaceWith(list1);
          });
        </script>
      </body>
    </html>

  10. #10
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aah yes it makes sense now because when i did a console.log with your code it pinpointed the options, then when i did it only picked out the select value, its something i need to look into traversing the dom using Javascript, many thanks for showing me this


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
  •