2016-10-17 7 views
0

剣道のドロップダウンに関数を入力していますが、デフォルト値を「選択オプション」にしたい場合は、もう一度選択することはできません。ここでKendoDropdownを無効にした既定のオプションを使用

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

答えて

0

あなたが追求できる2つの選択肢です:

  1. listrefreshそれからoptionLabel項目を削除し、ユーザーpicks a value後。
  2. ユーザーが値を選択した後、selectイベントでoptionLabelアイテムの選択を禁止します。

DropDownListのchangeイベントには、one-time handlerが必要です。ここで

は、両方のオプションの例です。

<!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) { 
 
\t \t \t \t \t e.sender.list.find(".k-list-optionlabel").remove(); 
 
      e.sender.refresh(); 
 
     }); 
 
     
 
     $("#products2").data("kendoDropDownList").one("change", function(e) { 
 
     \t e.sender.bind("select", function(j){ 
 
      \t if (j.dataItem.ProductID == "") { 
 
       j.preventDefault(); 
 
      } 
 
      }); 
 
     }); 
 
     
 
     }); 
 
    </script> 
 

 
    </body> 
 
</html>

関連する問題