jQWidgets Forums

Tagged: id, jqxListBox, ListBox, value

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 9 months ago.

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

Author

id + value in jqxListBox Posts

September 1, 2014 at 3:21 pm id + value in jqxListBox #59014

hanen.jomaa

Participant

Hi,

please I want enter in my jqxListBox 2 values for the some item : id + the label.

Can I do that?

can you help me please

thx
Hanen.

September 2, 2014 at 6:51 am id + value in jqxListBox #59021

Nadezhda

Participant

Hello Hanen,

Please, find below an example which shows how to get id and label in jqxListBox:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.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">
        $(document).ready(function () {
            var source = [{
                label: "Peppermint Hot Chocolate",
                value: "Chocolate Beverage"                
            }, {
                label: "Salted Caramel Hot Chocolate",
                value: "Chocolate Beverage"                
            }, {
                label: "White Hot Chocolate",
                value: "Chocolate Beverage"               
            }, {
                label: "Caffe Americano",
                value: "Espresso Beverage"                
            }, {
                label: "Caffe Latte",
                value: "Espresso Beverage"                
            }, {
                label: "Caffe Mocha",
                value: "Espresso Beverage"               
            }, {
                label: "Cappuccino",
                value: "Espresso Beverage"                
            }, {
                label: "Caramel Brulee Latte",
                value: "Espresso Beverage"                
            }, {
                label: "Caramel Macchiato",
                value: "Espresso Beverage"
            }, {
                label: "Peppermint Hot Chocolate",
                value: "Espresso Beverage"
            }, {
                label: "Cinnamon Dolce Latte",
                value: "Espresso Beverage"
            }, {
                label: "Eggnog Latte",
                value: "Espresso Beverage"
            }, {
                label: "Espresso",
                value: "Espresso Beverage"
            }, {
                label: "Espresso Con Panna",
                value: "Espresso Beverage"
            }, {
                label: "Espresso Macchiato",
                value: "Espresso Beverage"
            }, {
                label: "Flavored Latte",
                value: "Espresso Beverage"
            }, {
                label: "Gingerbread Latte",
                value: "Espresso Beverage"
            }, {
                label: "White Chocolate Mocha",
                value: "Espresso Beverage"
            }, {
                label: "Skinny Peppermint Mocha",
                value: "Espresso Beverage"
            }, {
                label: "Skinny Flavored Latte",
                value: "Espresso Beverage"               
            }, {
                label: "Pumpkin Spice Latte",
                value: "Espresso Beverage"
            }, {
                label: "Caffe Vanilla Frappuccino",
                value: "Frappuccino Blended Beverage"
            }, {
                label: "Caffe Vanilla Frappuccino Light",
                value: "Frappuccino Blended Beverage"
            }, {
                label: "Caramel Brulee Frappuccino",
                value: "Frappuccino Blended Beverage"
            }, {
                label: "Caramel Brulee Frappuccino Light",
                value: "Frappuccino Blended Beverage"
            }, {
                label: "Eggnog Frappuccino",
                value: "Frappuccino Blended Beverage"                
            }, {
                label: "Mocha Frappuccino",
                value: "Frappuccino Blended Beverage"               
            }, {
                label: "Tazo Green Tea Creme Frappuccino",
                value: "Frappuccino Blended Beverage"                
            }]
            // Create a jqxListBox
            $("#jqxWidget").jqxListBox({ source: source, width: 300, height: 300 });

            // update events.
            $("#jqxWidget").on('select', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        var valueelement = $("<div></div>");
                        valueelement.text("Value: " + item.value);
                        var labelelement = $("<div></div>");
                        labelelement.text("Label: " + item.label);
                        $("#selectionlog").children().remove();
                        $("#selectionlog").append(labelelement);
                        $("#selectionlog").append(valueelement);
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxWidget'>
        </div>
        <div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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.