jube-fork/Jube.App/wwwroot/kendo/examples/combobox/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example" role="application">
		    <div id="tshirt-view" class="demo-section k-content">
            <h4>Customize your Kendo T-shirt</h4>
            <img id="tshirt" alt="T-shirt image" src="../content/web/combobox/tShirt.png" />
            <h4><label for="fabric">T-shirt Fabric</label></h4>
                  <input id="fabric" placeholder="Select fabric..." style="width: 100%;" />
     
            <h4 style="margin-top: 2em;"><label for="size">T-shirt Size</label></h4>
            <select id="size" placeholder="Select size..." style="width: 100%;" >
              <option>X-Small</option>
              <option>Small</option>
              <option>Medium</option>
              <option>Large</option>
              <option>X-Large</option>
              <option>2X-Large</option>
            </select>
     
            <button class="k-button k-primary" id="get" style="margin-top: 2em; float: right;">Customize</button>
        </div>
        <style>
           #tshirt {
               display: block;
               margin: 2em auto;
           }
           .k-readonly
           {
               color: gray;
           }
        </style>

            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    $("#fabric").kendoComboBox({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            { text: "Cotton", value: "1" },
                            { text: "Polyester", value: "2" },
                            { text: "Cotton/Polyester", value: "3" },
                            { text: "Rib Knit", value: "4" }
                        ],
                        filter: "contains",
                        suggest: true,
                        index: 3
                    });

                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();

                    var fabric = $("#fabric").data("kendoComboBox");
					var select = $("#size").data("kendoComboBox");


					$("#get").click(function() {
					    alert('Thank you! Your Choice is:\n\nFabric ID: ' + fabric.value() + ' and Size: ' + select.value());
                    });
                });
            </script>
        </div>


    
</body>
</html>