劍道多選從列表中刪除選定的項目

Question

我正在使用劍道在 javascript 中創建一個項目。 我想從劍道下拉列表中刪除選定的項目。

這是代碼：

<div id="example" role="application">
    <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>
<script>
    $(document).ready(function() {
        // create MultiSelect from select HTML element
        var required = $("#required").kendoMultiSelect({
          //autoClose: false
        }).data("kendoMultiSelect");
    });
</script>

我越來越像這樣

http://dojo.telerik.com/iZuhOS/2

但我想要這個

http://dojo.telerik.com/iPOlapaB

Answer 1

您可以使用 css 隱藏選定的選項。 嘗試這個：

.k-state-selected {
  display: none;
}

演示

Answer 2

問題正在發生，因為您使用

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

如果您將其替換為

<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>

您還需要添加一些其他 styles 以使其工作：

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />

完整的代碼將是：

<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/multiselect/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.bootstrap.mobile.min.css" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />

    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" role="application">
        <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>
    <script>
        $(document).ready(function() {
            // create MultiSelect from select HTML element
            var required = $("#required").kendoMultiSelect({
              //autoClose: false
            }).data("kendoMultiSelect");
        });
    </script>
</div>
</body>
</html>

樣式有一些小問題，但主要問題已解決

劍道多選從列表中刪除選定的項目

問題描述

2 個解決方案

解決方案1
1 2019-11-07 09:02:56

解決方案2
1 2019-11-07 09:35:31

劍道多選從列表中刪除選定的項目

問題描述

2 個解決方案

解決方案1 1 2019-11-07 09:02:56

解決方案2 1 2019-11-07 09:35:31

解決方案1
1 2019-11-07 09:02:56

解決方案2
1 2019-11-07 09:35:31