带有禁用默认选项的KendoDropdown

KendoDropdown with disabled default option

本文关键字：选项 KendoDropdown 默认      更新时间：2023-09-26

我正在用一个函数填充剑道下拉菜单，但我希望默认值为"Select Option"，一旦你选择了另一个，你就不能选择它了。

function FillInDropDown(dataSet,ddID) {
    var dropDown = $(ddID);
    if (!dataSet.error) {
        var i;
        var values = [];
        // Apppend the other options on dataSet
        for (i = 0; i < dataSet.dropdownData.length; i++) {
            values.push(dataSet.dropdownData[i]);
        }
        // Clearing Values
        $(ddID).empty();

        $(ddID).kendoDropDownList({
            dataSource: [],
            animation: false
        });
        $(ddID).data("kendoDropDownList").dataSource.data(values);
        $(ddID).data("kendoDropDownList").value(values[0]);

    }
    else {
        simpleDialog.info(dataSet.ErrorMessage);
    }
};

您可以选择以下两个选项:

  1. 用户选择一个值后，将optionLabel项从list项和refresh项中移除。
  2. 用户选择一个值后，通过select事件阻止optionLabel项的选择。

您将需要一个一次性处理程序用于DropDownList的change事件。

下面是两个选项的例子:

<!DOCTYPE html>
<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  </head>
  <body>
    <p>The optionLabel will be removed:</p>
    <input id="products1" />
    
    <p>The optionLabel selection will be prevented:</p>
    <input id="products2" />
    <script>
      $(function() {
        
        var settings = {
          optionLabel: "Select a product",
          dataTextField: "ProductName",
          dataValueField: "ProductID",
          dataSource: {
            transport: {
              read: {
                dataType: "jsonp",
                url: "//demos.telerik.com/kendo-ui/service/Products",
              }
            }
          }
        };
        
        $("#products1").kendoDropDownList(settings);
        
        $("#products2").kendoDropDownList(settings);
        
        
        $("#products1").data("kendoDropDownList").one("change", function(e) {
					e.sender.list.find(".k-list-optionlabel").remove();
          e.sender.refresh();
        });
        
        $("#products2").data("kendoDropDownList").one("change", function(e) {
        	e.sender.bind("select", function(j){
          	if (j.dataItem.ProductID == "") {
              j.preventDefault();
            }
          });
        });
        
      });
    </script>
  </body>
</html>

相关文章：