2014-01-22 165 views
1

我第一次使用Kendo UI,並且在我的Kendo下拉列表更改中觸發某個功能時遇到了一些困難。Kendo UI DropDownList更改爲觸發事件

我的目標是根據用戶的下拉選擇顯示不同的搜索字段。我嘗試了幾種不同的方法,似乎沒有任何工作。

有沒有人有一個簡單的jQuery代碼片段可以獲得Kendo UI下拉菜單的文本?

我的代碼如下:

<script> 
    $(document).ready(function() { 
     var a = $("div#searchbox span.k-input").text(); 
     console.log(a); 
     $(a).change(function(){ 
      $('.searchingfor').hide(); 
      $('#' + a).show(); 
     }); 
    }); 
</script> 
@using (Html.BeginForm()) 
{ 
    <div id="searchbox" class="label"> 
     @Html.Label("Search") 
     @Html.TextBox("QuickSearch", null, new { style = "width:91%", @class = "k-input" }) 
     <br /> 
     <br /> 
     @(Html.Kendo().DropDownList() 
         .DataTextField("Text") 
         .DataValueField("Value") 
         .BindTo(new List<SelectListItem>() 
         { 
          new SelectListItem() 
          { 
           Text = "All", 
           Value = "1" 
          }, 
          new SelectListItem() 
          { 
           Text = "Customer", 
           Value = "2" 
          }, 
          new SelectListItem() 
          { 
           Text = "Contact", 
           Value = "3" 
          }, 
          new SelectListItem() 
          { 
           Text = "Service Employee", 
           Value = "4" 
          }, 
          new SelectListItem() 
          { 
           Text = "Organization", 
           Value = "5" 
          }, 
          new SelectListItem() 
          { 
           Text = "Employee", 
           Value = "6" 
          }, 
          new SelectListItem() 
          { 
           Text = "Other", 
           Value = "7" 
          } 
         }) 
        .Name("SearchType") 
        ) 
    </div> 
} 

回答

5
@(Html.Kendo().DropDownList() 
        .DataTextField("Text") 
        .DataValueField("Value") 
        .BindTo(new List<SelectListItem>() 
        { 
         new SelectListItem() 
         { 
          Text = "All", 
          Value = "1" 
         }, 
         new SelectListItem() 
         { 
          Text = "Customer", 
          Value = "2" 
         }, 
         new SelectListItem() 
         { 
          Text = "Contact", 
          Value = "3" 
         }, 
         new SelectListItem() 
         { 
          Text = "Service Employee", 
          Value = "4" 
         }, 
         new SelectListItem() 
         { 
          Text = "Organization", 
          Value = "5" 
         }, 
         new SelectListItem() 
         { 
          Text = "Employee", 
          Value = "6" 
         }, 
         new SelectListItem() 
         { 
          Text = "Other", 
          Value = "7" 
         } 
        }) 
       .Name("SearchType") 
       .Events(e => e.Change("OnSearchTypeChange")); 

<script type="text/javascript"> 
function OnSearchTypeChange(e) 
{ 
//Do whatever you want to do 
} 
</script> 
1

訂閱onSelect事件,然後獲得所選項目的文本。以下來自kendo演示網站。

function onSelect(e) { 
        if ("kendoConsole" in window) { 
         var dataItem = this.dataItem(e.item.index()); 
         kendoConsole.log("event :: select (" + dataItem.text + " : " + dataItem.value + ")"); 
        } 
       }; 
0

我用劍道MVC和我的下拉列表的代碼是:

@(Html.Kendo() 
    .DropDownListFor(p=> p.SelectedItem) 
    .BindTo((List<SelectListItem>)ViewBag.SelectedListItems) 
    .Events(p => p.Change("function(e){list_change(e);}") 
)) 

所以在變化FUNC:

function personType_Change(e) { 
    var item = $('#SelectedItem').data("kendoDropDownList"); 

    //use item.value() and write your own codes 

} 

也許可以幫助別人:)

相關問題