Question

我用一个函数填充了一个kendo下拉列表，但我希望默认值为＆＃34;选择选项＆＃34;一旦你选择另一个，你将无法选择它。

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);
    }
};

Answer 1

以下是您可以采用的两种选择：

在用户picks a value之后，从list和refresh移除optionLabel项。
用户选择一个值后，阻止通过select事件选择optionLabel项。

DropDownList的change事件需要one-time handler。

以下是两个选项的示例：

＆＃13;

<!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>

＆＃13;

KendoDropdown具有禁用的默认选项

1 个答案: