jQWidgets Forums

Tagged: DropDownList, jqxDropDownList, Link

This topic contains 3 replies, has 2 voices, and was last updated by mcarlotta 12 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Auto Redirect When Item is Clicked Posts

April 17, 2013 at 10:38 pm Auto Redirect When Item is Clicked #19478

Member

Hi,

I am working with DropDownList and want to make it so when I click on an “list item”, it will redirect to the specified link that aligns with that topic.

Here is my code setup (i know its a bit incomplete as I am unsure what I need to do next)

$(document).ready(function () {
var theme = getDemoTheme();
var source = [
{label: “Select a City…”, value: “#”},
{label: “Option 1”, value: “http://www.example.com/link1”},
{label: “Option 2”, value: “http://www.example.com/link2”},
{label: “Option 3”, value: “http://www.example.com/link3”},
{label: “Option 4”, value: “http://www.example.com/link4”},
];

// Create a jqxDropDownList
$(“#jqxdropdownlist”).jqxDropDownList({ source: source,
selectedIndex: 0,
width: ‘240’,
height: ’45’,
theme: ‘bootstrap’,
animationType: ‘fade’,

});

Thanks

April 18, 2013 at 5:16 am Auto Redirect When Item is Clicked #19495

Dimitar

Participant

Hello mcarlotta,

Here is the solution:

<!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/jquery-1.8.3.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 source = [
{ label: "Select a City...", value: "#" },
{ label: "Option 1", value: "http://www.example.com/link1" },
{ label: "Option 2", value: "http://www.example.com/link2" },
{ label: "Option 3", value: "http://www.example.com/link3" },
{ label: "Option 4", value: "http://www.example.com/link4"}];
                // Create a jqxDropDownList
                $("#jqxdropdownlist").jqxDropDownList({ source: source, selectedIndex: 1, width: '200px', height: '25px' });
                // bind to 'select' event.
                $('#jqxdropdownlist').bind('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxdropdownlist').jqxDropDownList('getItem', args.index);
                    window.location = item.value;
                });
            });
        </script>
        <div id='jqxdropdownlist'>
        </div>
    </div>
</body>

Best Regards,
Dimitar

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

April 18, 2013 at 2:16 pm Auto Redirect When Item is Clicked #19553

mcarlotta

Member

Dimitar,

I can not thank you enough! Works perfectly.

Another quick question…is there a way for me to make “Select a City…” a starting title for the drop down but not show up in the list itself? I ask, because obviously, that option is more of a placeholder with no value.

Thanks again!

April 18, 2013 at 8:11 pm Auto Redirect When Item is Clicked #19576

mcarlotta

Member

Nevermind..figured it out using a placeHolder.

Thank you again!

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.