All Components

ComboBox / Basic usage

Customize your Kendo T-shirt

T-shirt Fabric

T-shirt Size

HTML5/JavaScript 源码

<!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.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.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" src="../content/web/combobox/tShirt.png"> 
    <h4>T-shirt Fabric</h4> 
    <input id="fabric" placeholder="Select fabric..." style="width: 100%;"> 
    <h4 style="margin-top: 2em;">T-shirt Size</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>