zoukankan      html  css  js  c++  java
  • KendoUI系列:ComboBox

      1、基本使用

      1>、创建Input

    <input id="color" placeholder="Select Color..." />
    <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#color").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Black", value: "1" },
                    { text: "Orange", value: "2" },
                    { text: "White", value: "3" }
                ],
                filter: "contains" // 包括:eq,neq,gt,gte,lt,lte,startswith,endswith,contains,doesnotcontain
                //index: 1 // 默认选中项索引,索引从0开始。
            });
        });
    </script>

      效果预览:

      设置初始化时选中项:

    var color = $("#color").data("kendoComboBox");
    color.select(1); // 设置初始化时选中项,索引从0开始。

      获取当前选中项Value值:

    var color = $("#color").data("kendoComboBox");
    color.value(); 

      获取当前选中项Text值:

    var color = $("#color").data("kendoComboBox");
    color.text(); 

      2>、创建select

  • 相关阅读:
    Angular2新人常犯的5个错误
    好爱情,坏爱情
    关于css中a标签的样式
    移动端rem布局实践
    我们这一代人的困惑
    原创ui.router源码解析
    Web客户端数据存储学习笔记——Cookie
    喝汤了——如何用一年时间获得十年的能力和经验
    Petya勒索木马
    推荐几个精致的web UI框架
  • 原文地址:https://www.cnblogs.com/libingql/p/3772957.html
Copyright © 2011-2022 走看看