www.webdeveloper.com
Results 1 to 3 of 3

Thread: Using Javascript to change the select menus

  1. #1
    Join Date
    Mar 2012
    Posts
    13

    Using Javascript to change the select menus

    Hello,

    I have been working on creating a contact form for a website i am working on. I have been having lots of trouble getting two select menus to function properly (as far as adding the CSS to it goes). Was wondering if there was someone that would help me figure this out.

    If you guys need more information or have another suggestion for doing this then please let me know, I am open to any suggestion

    This is the website i have been working with.
    http://www.jankoatwarpspeed.com/post...ss-jquery.aspx

    this is my code.

    HTML Code:
    <!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>Reinventing drop down with CSS and jQuery - demo</title>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    
        <style type="text/css">
    #drop1 {
    float:left;	
    }
    
    #drop2 {
    float:right;	
    }
           
            .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 = $("#source1");
    			
    
                    source.val($(this).find("span.value").html())
    
                });
    
            });
    
            
    
            function createDropDown(){
    
                var source = $("#source1");
    			
    
                var selected = source.find("option[selected]");
    
                var options = $("option", source);
    
                
    
                $("#drop1").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>
    
    <div id="drop1">
        <select id="source1">
    
            <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>
    </div>
    
    
    <div id="drop2">
        <select id="source2">
    
            <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>
    </div>
    </body>
    
    </html>
    
    

  2. #2
    Join Date
    Nov 2010
    Posts
    1,031
    what exactly is the problem?

  3. #3
    Join Date
    Mar 2012
    Posts
    13
    I can only have one menu, i basically just need to duplicate the menu so i have two.

    When I try (keep in mind i am no where near an expert at Java) it seems like i cant get two different menus going.

    Does that help?
    I can try and explain more if that doesnt really help.

Thread Information

Users Browsing this Thread

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

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