Kendo UI多選擇下拉菜單並選擇所有選項

我需要一個具有以下功能的kendo ui下拉列表。Kendo UI多選擇下拉菜單並選擇所有選項

有選擇複選框

多選擇下拉以檢查多個選項的時間。

選中所有複選框作爲標題模板，當我點擊它時，所有已過濾選擇了該選項的搜索結果。

我經歷了許多參考資料不見了，找到telrik密切的解決方案。我的第一個要求得到滿足。我在這裏附帶了代碼片段。

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
</head> 

<body> 

    <div id="example" role="application"> 
     <div class="demo-section k-header"> 
      <h2>Invite Attendees</h2> 
      <label for="required">Required</label> 
      <select id="required" multiple="multiple" data-placeholder="Select attendees..."> 
       <option selected>Steven White</option> 
       <option>Nancy King</option> 
       <option>Nancy Davolio</option> 
       <option>Robert Davolio</option> 
       <option>Michael Leverling</option> 
       <option>Andrew Callahan</option> 
       <option>Michael Suyama</option> 
       <option selected>Anne King</option> 
       <option>Laura Peacock</option> 
       <option>Robert Fuller</option> 
       <option>Janet White</option> 
       <option>Nancy Leverling</option> 
       <option>Robert Buchanan</option> 
       <option>Margaret Buchanan</option> 
       <option selected>Andrew Fuller</option> 
       <option>Anne Davolio</option> 
       <option>Andrew Suyama</option> 
       <option>Nige Buchanan</option> 
       <option>Laura Fuller</option> 
      </select> 
     </div> 
     <style> 
      .k-list .k-item {} 

      .k-item input {} 
     </style> 
     <script> 
      $(document).ready(function() { 
       var checkInputs = function (elements) { 
        elements.each(function() { 
         var element = $(this); 
         var input = element.children("input"); 

         input.prop("checked", element.hasClass("k-state-selected")); 
        }); 
       }; 
       // create MultiSelect from select HTML element 
       var required = $("#required").kendoMultiSelect({ 
        itemTemplate: "<input type='checkbox'/> #:data.text#", 
        autoClose: false, 
        dataBound: function() { 
         var items = this.ul.find("li"); 
         setTimeout(function() { 
          checkInputs(items); 
         }); 
        }, 
        change: function() { 
         var items = this.ul.find("li"); 
         checkInputs(items); 
        } 
       }).data("kendoMultiSelect"); 
      }); 
     </script> 
    </div> 
</body> 

</html>

我怎樣才能達到我的第二個要求，選擇所有選項，選擇我過濾的搜索結果。我正在尋找kend ui Multi Select選項本身。我對jQuery多選下拉菜單不感興趣。期待尋求幫助。提前致謝。

來源

2016-11-10 Nitheesh

感謝解決方案Vispan良好的工作。我已經從您發佈的代碼開發瞭解決方案。我在這裏分享這段代碼，因爲這可能對你們中的一些人非常有幫助。

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
    <script> 
     $(document).ready(function() { 



      var data = [{"name":"Afghanistan"},{"name":"Åland Islands"},{"name":"Albania"},{"name":"Algeria"},{"name":"American Samoa"},{"name":"Andorra"},{"name":"Angola"},{"name":"Anguilla"},{"name":"Antarctica"},{"name":"Antigua and Barbuda"},{"name":"Argentina"},{"name":"Armenia"},{"name":"Aruba"},{"name":"Australia"},{"name":"Austria"},{"name":"Azerbaijan"},{"name":"Bahamas"},{"name":"Bahrain"},{"name":"Bangladesh"},{"name":"Barbados"},{"name":"Belarus"},{"name":"Belgium"},{"name":"Belize"},{"name":"Benin"},{"name":"Bermuda"},{"name":"Bhutan"},{"name":"Bolivia"},{"name":"Bonaire"},{"name":"Bosnia and Herzegovina"},{"name":"Botswana"},{"name":"Bouvet Island"},{"name":"Brazil"},{"name":"British Indian Ocean Territory"},{"name":"British Virgin Islands"},{"name":"Brunei"},{"name":"Bulgaria"},{"name":"Burkina Faso"},{"name":"Burundi"},{"name":"Cambodia"},{"name":"Cameroon"},{"name":"Canada"},{"name":"Cape Verde"},{"name":"Cayman Islands"},{"name":"Central African Republic"},{"name":"Chad"},{"name":"Chile"},{"name":"China"},{"name":"Christmas Island"},{"name":"Cocos (Keeling) Islands"},{"name":"Colombia"},{"name":"Comoros"},{"name":"Republic of the Congo"},{"name":"Democratic Republic of the Congo"},{"name":"Cook Islands"},{"name":"Costa Rica"},{"name":"Côte d'Ivoire"},{"name":"Croatia"},{"name":"Cuba"},{"name":"Curaçao"},{"name":"Cyprus"},{"name":"Czech Republic"},{"name":"Denmark"},{"name":"Djibouti"},{"name":"Dominica"},{"name":"Dominican Republic"},{"name":"Ecuador"},{"name":"Egypt"},{"name":"El Salvador"},{"name":"Equatorial Guinea"},{"name":"Eritrea"},{"name":"Estonia"},{"name":"Ethiopia"},{"name":"Falkland Islands"},{"name":"Faroe Islands"},{"name":"Fiji"},{"name":"Finland"},{"name":"France"},{"name":"French Guiana"},{"name":"French Polynesia"},{"name":"French Southern and Antarctic Lands"},{"name":"Gabon"},{"name":"Gambia"},{"name":"Georgia"},{"name":"Germany"},{"name":"Mali"},{"name":"Malta"},{"name":"Marshall Islands"},{"name":"Martinique"},{"name":"Mauritania"},{"name":"Mauritius"},{"name":"Mayotte"},{"name":"Mexico"},{"name":"Micronesia"},{"name":"Moldova"},{"name":"Monaco"},{"name":"Mongolia"},{"name":"Montenegro"},{"name":"Montserrat"},{"name":"Morocco"},{"name":"Mozambique"},{"name":"Myanmar"},{"name":"Namibia"},{"name":"Nauru"},{"name":"Nepal"},{"name":"Netherlands"},{"name":"New Caledonia"},{"name":"New Zealand"},{"name":"Nicaragua"},{"name":"Niger"},{"name":"Nigeria"},{"name":"Niue"},{"name":"Norfolk Island"},{"name":"North Korea"},{"name":"Northern Mariana Islands"},{"name":"Norway"},{"name":"Oman"},{"name":"Pakistan"},{"name":"Palau"},{"name":"Palestine"},{"name":"Panama"},{"name":"Papua New Guinea"},{"name":"Paraguay"},{"name":"Peru"},{"name":"Philippines"},{"name":"Pitcairn Islands"},{"name":"Poland"},{"name":"Portugal"},{"name":"Turks and Caicos Islands"},{"name":"Tuvalu"},{"name":"Uganda"},{"name":"Ukraine"},{"name":"United Arab Emirates"},{"name":"United Kingdom"},{"name":"United States"},{"name":"United States Minor Outlying Islands"},{"name":"United States Virgin Islands"},{"name":"Uruguay"},{"name":"Uzbekistan"},{"name":"Vanuatu"},{"name":"Venezuela"},{"name":"Vietnam"},{"name":"Wallis and Futuna"},{"name":"Western Sahara"},{"name":"Yemen"},{"name":"Zambia"},{"name":"Zimbabwe"}]; 

      var ds = new kendo.data.DataSource({ 
       data: data 
      }); 

      var checkInputs = function (elements) { 
       elements.each(function() { 
        var element = $(this); 
        var input = element.children("input"); 

        input.prop("checked", element.hasClass("k-state-selected")); 
       }); 
      }; 

      $("#items").kendoMultiSelect({ 
       dataValueField: "name", 
       dataTextField: "name", 
       dataSource: ds, 
       dataBound: function() { 
        var items = this.ul.find("li"); 
        setTimeout(function() { 
         checkInputs(items); 
        }); 
       }, 
       itemTemplate: "<input type='checkbox'/> #:data.name#", 
       headerTemplate: "<div><input type='checkbox' id='Header'><label> Select All</label></div>", 
       autoClose: false, 
       change: function() { 
        var items = this.ul.find("li"); 
        checkInputs(items); 
       } 
      }); 

      $('#Header').click(function() { 
       if ($(this).is(':checked')) { 
        $('#items_listbox').find("li").each(function() { 
         $(this).trigger("click"); 
         //$(this).find("input").prop("checked",true); 
        }); 
       } else { 
        $('#items_listbox').find("li").each(function() { 
         $(this).trigger("click"); 
         //$(this).find("input").prop("checked", false); 
        }); 
       } 
      }); 

      $('#containerDiv').keydown(function (e) { 
       $("#Header").attr("checked", false); 
      }); 

     }); 
    </script> 
</head> 

<body> 

    <div id="example" role="application"> 
     Type a country name: 
     <div id="containerDiv"><div id="items"></div></div> 
    </div> 
</body> 

</html>

來源

2016-11-10 13:38:10 Nitheesh

根據從這個問題的理解，你似乎想要一個單獨的標題，在過濾的列表上執行選擇。使用此代碼：

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
</head> 

<body> 

    <div id="example" role="application"> 
     <div class="demo-section k-header"> 
      <h2>Invite Attendees</h2> 
      <label for="required">Required</label> 
      <input type="checkbox" id="Header" value="Header" /> 
      <select id="required" multiple="multiple" data-placeholder="Select attendees..."> 
       <option >Steven White</option> 
       <option>Nancy King</option> 
       <option>Nancy Davolio</option> 
       <option>Robert Davolio</option> 
       <option>Michael Leverling</option> 
       <option>Andrew Callahan</option> 
       <option>Michael Suyama</option> 
       <option >Anne King</option> 
       <option>Laura Peacock</option> 
       <option>Robert Fuller</option> 
       <option>Janet White</option> 
       <option>Nancy Leverling</option> 
       <option>Robert Buchanan</option> 
       <option>Margaret Buchanan</option> 
       <option>Andrew Fuller</option> 
       <option>Anne Davolio</option> 
       <option>Andrew Suyama</option> 
       <option>Nige Buchanan</option> 
       <option>Laura Fuller</option> 
      </select> 
     </div> 
     <style> 
      .k-list .k-item { 
      } 

      .k-item input { 
      } 
     </style> 
     <script> 
      $(document).ready(function() { 
       var checkInputs = function (elements) { 
        elements.each(function() { 
         var element = $(this); 
         var input = element.children("input"); 

         input.prop("checked", element.hasClass("k-state-selected")); 
        }); 
       }; 
       // create MultiSelect from select HTML element 
       var required = $("#required").kendoMultiSelect({ 
        itemTemplate: "<input type='checkbox'/> #:data.text#", 
        autoClose: false, 
        dataBound: function() { 
         var items = this.ul.find("li"); 
         setTimeout(function() { 
          checkInputs(items); 
         }); 
        }, 
        change: function() { 
         var items = this.ul.find("li"); 
         checkInputs(items); 
        } 
       }).data("kendoMultiSelect"); 


       $('#Header').click(function() { 
        if ($(this).is(':checked')) { 
         $('#required_listbox').find("li").each(function() { 
          $(this).trigger("click"); 
          //$(this).find("input").prop("checked",true); 
         }); 
        } 
        else { 
         $('#required_listbox').find("li").each(function() { 
          $(this).trigger("click"); 
          //$(this).find("input").prop("checked", false); 
         }); 
        } 
       }); 
      }); 
     </script> 
    </div> 
</body> 

</html>

來源

2016-11-10 11:43:26 RonyLoud

感謝您的解決方案。這是我所期望的，但對我來說，全選複選框應該位於下垂列表中。我在問題中添加了一張圖片。 – Nitheesh

無論如何感謝。我從您發佈的答案開發了我的解決方案。 – Nitheesh

Kendo UI多選擇下拉菜單並選擇所有選項

回答

相關問題