Styled "select" input boxes

cdoggg94 · May 27, 2013

I am trying to use JS and jQuery to style my select form elements.

I got the template from this site:

http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/

My problems are:

1) When I run the page, it shows the styled select box, but also the original.

2) I can't seem to have more than 1 select box working with its independent values.

Here is the code on the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>My Select Menu</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
        .desc { color:#6b6b6b;}
        .desc a {color:#0092dd;}
        
        .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
        .dropdown dd { position:relative; }
        .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#5d4617;}
        .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
        .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
                        border:1px solid #d4ca9a; width:160px; padding:5px;}
        .dropdown dt a span {cursor:pointer; display:block;}
        .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                          left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
        .dropdown span.value { display:none;}
        .dropdown dd ul li a { padding:5px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}
        
        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
        .flagvisibility { display:none;}
        
        
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            createDropDown();
            
            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });

            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });
                        
            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a").html(text);
                $(".dropdown dd ul").hide();
                
                var source = $("#source");
                source.val($(this).find("span.value").html())
            });
        });
        
        function createDropDown(){
            var source = $("#source");
            var selected = source.find("option[selected]");
            var options = $("option", source);
            
            $("body").append('<dl id="target" class="dropdown"></dl>')
            $("#target").append('<dt><a href="#">' + selected.text() + 
                '<span class="value">' + selected.val() + 
                '</span></a></dt>')
            $("#target").append('<dd><ul></ul></dd>')

            options.each(function(){
                $("#target dd ul").append('<li><a href="#">' + 
                    $(this).text() + '<span class="value">' + 
                    $(this).val() + '</span></a></li>');
            });
        }
		
    </script>
    

</head>
<body>
    <h1> </h1>
    
    <p>
    <form id="input">
    
      <select id="source">
        <option selected="selected" value="BR">Brasil</option>
        <option value="FR">France</option>
        <option value="DE">Germany</option>
        <option value="IN">India</option>
        <option value="JP">Japan</option>
        <option value="RS">Serbia</option>
        <option value="UK">United Kingdom</option>
        <option value="US">United States</option>
      </select>
      <br />
      <select id="source2">
        <option selected="selected" value="BR2">Brasil2</option>
        <option value="FR2">France2</option>
        <option value="DE2">Germany2</option>
        <option value="IN22">India2</option>
        <option value="JP2">Japan2</option>
        <option value="RS2">Serbia2</option>
        <option value="UK2">United Kingdom2</option>
        <option value="US2">United States2</option>
      </select>
      
      </form>
    </p>
    <p> </p>
</body>
</html>

I was wondering if I just needed to duplicate the script with a different select id for each ?

Or if there is a general id for ALL select menu elements ?

Attached is the browsers output.

cdoggg94 · May 27, 2013

Sorry I apparently did not attach this in the last post..

Jessica · May 27, 2013

You cannot have two HTML elements of any kind with the same ID. Your HTML looks correct because the selects have different ids. You can try passing each ID to your function, after you re-write the function to accept IDs.

However, to select all select elements, you can use 'select'. Then use jQuery to iterate over them.

cdoggg94 · May 27, 2013

Alright...I'm pretty confused but I'm gonna try and research what you have suggested and then test a few things...Thanks

Sign In

Styled "select" input boxes

Recommended Posts

cdoggg94

Link to comment

Share on other sites

cdoggg94

Link to comment

Share on other sites

Jessica

Link to comment

Share on other sites

cdoggg94

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information