jQWidgets Forums

jQuery UI Widgets › Forums › Lists › DropDownList › Multiple dropdown on same page

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Multiple dropdown on same page Posts
  • July 17, 2013 at 12:52 pm Multiple dropdown on same page #25340

    maximuss
    Member

    Hey,

    I have some problem when im trying to use 2 dropdown on the same page, but i can only get one of them working.

    My code is:

    JavaScript:

        var months = ["januar","februar","marts","april","maj","juni","juli","august","september","oktober","november","december"];
        var days = new Array();
        for(var i = 1; i < 32;i++)
        {
            days[i-1] = i;
        }
        $("#day").jqxDropDownList({autoOpen:true, source: days, selectedIndex: 0, width: '44', height: '25', theme: theme });
        $("#month").jqxDropDownList({ source: months, selectedIndex: 0, width: '100', height: '25', theme: theme });

    HTML

    <div id="day"/>
    <div id="month"/>

    If i outcomment one of them in the JS file, then its working like a charm, but i just cant get it to work with both simultaneous

    /Bjarne

    July 17, 2013 at 2:16 pm Multiple dropdown on same page #25356

    Peter Stoev
    Keymaster

    Hi,

    The DIV tags are not closed correctly.

    Here’s a working sample: 

    <!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>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var months = ["januar", "februar", "marts", "april", "maj", "juni", "juli", "august", "september", "oktober", "november", "december"];
                    var days = new Array();
                    for (var i = 1; i < 32; i++) {
                        days[i - 1] = i;
                    }
                    var theme = "";
                    $("#day").jqxDropDownList({ autoOpen: true, source: days, selectedIndex: 0, width: '44', height: '25', theme: theme });
                    $("#month").jqxDropDownList({ source: months, selectedIndex: 0, width: '100', height: '25', theme: theme });
                });
            </script>
       <div id="day"></div>
    <div id="month"></div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.