下拉列表中的值和文本中的自动填充

我有一个简单的自动完成从teleric UI下拉列表。我只是想通过jQuery从下拉列表中获取文本和值。但它不工作。这里是我想要当我改变下拉list.say得到的值和文本代码下拉列表中的值和文本中的自动填充

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <meta charset="utf-8" /> 
    <title>Kendo UI Snippet</title> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <%--<input id="autocomplete" /> 
--%>  <<asp:DropDownList ID="autocomplete" runat="server" ClientIDMode="Static"> 
     </asp:DropDownList> 

    </div> 
    </form> 
    <script type="text/javascript"> 
     $(function() { 
      var data = [ 
       { id: 1, name: "Apples" }, 
       { id: 2, name: "Oranges" } 
      ]; 
      $("#autocomplete").kendoAutoComplete({ 
       dataTextField: "name", // The widget is bound to the "name" field 
       dataSource: data 
      }); 
      $('#autocomplete').on('change', function() { 
       var autoCompleteValue = $('#autocomplete').val(); 
       var autoCompleteText = $('#autocomplete').text(); 
       alert(autoCompleteValue + '->' + autoCompleteText); 
      }); 

     }); 
    </script> 
</body> 
</html>

我选择苹果

我想

autoCompleteValue = "1"; 
autoCompleteText = "Apples";

来源

2016-04-24 syed mhamudul hasan akash

，可以稍微修改代码来实现你的解决方案：

<input id="autocomplete" /> 
<div id="result"></div> 

$("#autocomplete").kendoAutoComplete({ 
    dataTextField: "name", 
    select: function(e) { 
     var dataItem = this.dataItem(e.item.index());    
     //output selected dataItem 
     $("#result").html(kendo.stringify(dataItem)); // Bind html to see your selected text and value  
    }, 
    dataSource: { 
     data: [ 
      { name: "Apples", value: 1 }, 
      { name: "Oranges", value: 2 }, 
      { name: "Bananas", value: 3 }, 
      { name: "Mangos", value: 4 } 
     ] 
    } 
});

来源

2016-04-24 09:28:05

完美的作品。可你只是帮我送基于搜索结果Ajax请求。说我按** a **我会调用ajax请求发送** a **到背景并根据** a **获取数据并将其绑定到自动完成。如果可能请给另一个答案 –

您可能需要改变你的数据源和自动完成功能如下：

var items = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url  : "/Home/GetItems", 
      type : "POST", 
      dataType: "json" 
     } 
    }, 
    schema : { 
     model: { 
      id : "id", 
      fields: { 
       id : { type: "id" }, 
       name: { type: "string" } 
      } 
     } 
    } 
}); 

var autoComplete = $("#autocomplete").kendoAutoComplete({ 
    minLength  : 3, 
    separator  : ", ", 
    dataSource  : items, 
    serverFiltering: true, 
    dataTextField : "name" 
}).data("kendoAutoComplete");

来源

2016-04-24 10:33:04

我传递的参数是什么？ –

运输：{ 读：{ URL： “/首页/ GetItems”，类型： “POST”，数据类型： “JSON” }， parameterMap的：函数（）{ 返回{值：$（“＃自动完成“）。data（”kendoAutoComplete“）.value（）}; } } } –

谢谢@Samyukta R. IT完美运作 –

下拉列表中的值和文本中的自动填充

回答

相关问题