Adding Links?

[neuhaus3000Member]

Hello All,

How can I add links to each option in the list menu?

Thanks!

neuhaus3000

[Peter StoevKeymaster]

Hi neuhaus3000,

You can customize the built-in list items rendering. A sample which demonstrates how you can achieve this is shown here: rendering.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[neuhaus3000Member]

Hello Peter,

I have looked at the example but I don’t seem to know where to add the links…
I want a simple drop down list with a few options.

Option 1
Option 2
Option 3
Option 4
Option 5

When I click on an option, I go to one of the URL…

Can you please help me?

Thanks!!!

neuhaus3000

[Peter StoevKeymaster]

Hi neuhaus3000,

In the sample, the items template is specified in the “renderer” callback function. You can return any HTML there. For links, it should be something as: “<a href="…

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[neuhaus3000Member]

Here’s my code but it doesn’t work…

$(document).ready(function () {
var theme = getDemoTheme();
var source = [
“Affogato”,
“Americano”,
“Bicerin”,
“Breve”,
“Café Bombón”,
“Café au lait”,
“Caffé Corretto”,
“Café Crema”,
“Caffé Latte”,
“Caffé macchiato”,
“Café mélange”,
“Coffee milk”,
“Cafe mocha”,
“Cappuccino”,
“Carajillo”,
“Cortado”,
“Cuban espresso”,
“Espresso”,
“Eiskaffee”,
“The Flat White”,
“Frappuccino”,
“Galao”,
“Greek frappé coffee”,
“Iced Coffee”,
“Indian filter coffee”,
“Instant coffee”,
“Irish coffee”,
“Liqueur coffee”
];
var url = [
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”,
“http://www.google.com”
];

// Create a jqxDropDownList
$(“#jqxWidget”).jqxDropDownList({ source: source, url: url, selectedIndex: 1, width: ‘200’, height: ’25’, theme: theme });
});

[Peter StoevKeymaster]

Hi neuhaus3000,

The widget does not have a property called “url”. Each list item can have label and value defined like that

{label: "Item Text", value: "http://www.google.com"}

In the custom items renderer as demonstrated in the sample I posted in a previous post, you can display the value as a hyperlink when the item is rendered.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts