Question

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/multiselect/index">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/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 value="1">Steven White</option>
            <option value="2">Nancy King</option>
            <option value="3">Nancy Davolio</option>
            <option value="4">Robert Davolio</option>
        </select>
        <label for="optional">Optional</label>
        <select id="optional" multiple="multiple" data-placeholder="Select attendees...">
            <option>Steven White</option>
            <option>Nancy King</option>
            <option>Nancy Davolio</option>
        </select>
        <button class="k-button" id="get">Send Invitation</button>
    </div>
    <script>
        $(document).ready(function() {
            // create MultiSelect from select HTML element
            var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");
            var optional = $("#optional").kendoMultiSelect().data("kendoMultiSelect");

            $("#get").click(function() {
                alert("Attendees:\n\nRequired: " + required.value() + "\nOptional: " + optional.value());
            });
        });
    </script>
</div> 
</body>
</html>

使用KendoMulti Select框时如何获取选项标签的文本？目前使用.value（）为我提供了options标签的value属性。

以上示例取自http://demos.telerik.com/kendo-ui/multiselect/index

并从中进行了编辑

Answer 1

使用javascript，document.getElemntById（）。options [index]和InnerHTML，如下所示

已编辑：要全部选择，您可以使用javascript数组绑定所有记录，并使用连接操作打印为单个文本..如下所示

 $(document).ready(function() {
            // create MultiSelect from select HTML element
            var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");
            var optional = $("#optional").kendoMultiSelect().data("kendoMultiSelect");

            var Element= document.getElementById("required");

            $("#get").click(function() {

                 var arr = new Array()
                 for (var i = 0; i < required.value().length; i++) {
                      arr.push(Element.options[required.value()[i] - 1].innerHTML);
                 }

                 alert("Attendees:\n\nRequired: " +arr.join() + "\nOptional: " + optional.value());
            });
        });

使用Kendo MultiSelect时如何获取选项标签的文本

1 个答案: