Selectbox jquery selector problem

**harshyp** · Nov 22, 2012 21:01

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

**Pullo** · Nov 23, 2012 02:34

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.

**harshyp** · Nov 23, 2012 03:31

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

**harshyp** · Nov 29, 2012 18:00

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

**Pullo** · Nov 30, 2012 02:56

Hi,

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

Originally Posted by harshyp

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?

**harshyp** · Dec 1, 2012 08:59

Hello Pullo many thanks for your reply, I'll definitely give it a try and post back

**harshyp** · Dec 2, 2012 16:46

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);

**harshyp** · Dec 2, 2012 18:38

i forgot to say i've uploaded it as well. http://www.harshadpatel.co.uk/selectbox/

**Pullo** · Dec 3, 2012 02:32

Hi there harshyp,

Originally Posted by harshyp

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>

**harshyp** · Dec 7, 2012 03:43

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

User Tag List

Thread: Selectbox jquery selector problem

Thread Tools

Display

Selectbox jquery selector problem

Bookmarks

Bookmarks

Posting Permissions