如何在kendo-ui中默认显示占位符

时间:2016-07-13 17:23:14

标签: javascript jquery html css kendo-ui

我实现了剑道但我想默认保留占位符,就像默认显示选择行星一样。

但默认情况下显示选项,如下面的示例所示,当我删除占位符正确显示的选项时。

但我的目标是默认显示占位符,并增加占位符大小。提前谢谢。

<!doctype html>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
        <div id="example" role="application">
            <div id="tshirt-view" class="demo-section k-content">
                <h4 style="margin-top: 2em;">Solar System</h4>
                <select id="size" placeholder="Select Planets..." style="width: 220px;" >
                    <option />Mercury
                    <option />Venus
                    <option />Earth
                    <option />Mars
                    <option />Jupiter
                    <option />Plutz
                </select>
            </div>
            <script>
                $(document).ready(function() {
                    // create ComboBox from input HTML element
                    
                    // create ComboBox from select HTML element
                    $("#size").kendoComboBox();

                    var select = $("#size").data("kendoComboBox");
                });
            </script>
        </div>
</!doctype>

2 个答案:

答案 0 :(得分:3)

根据Kendo documentation for combo box

$("#combobox").kendoComboBox({
  placeholder: "Select..."
});

答案 1 :(得分:2)

尝试添加其他默认选项

<option value="" disabled selected>Select Planest...</option>