Kendo 多选值将逗号替换为逗号 + space

Question

我正在使用 kendo 多选。默认返回的值是所选值的逗号分隔值。我想以更易读的格式显示它，并在逗号之间添加 space。我的代码....

http://dojo.telerik.com/OcIxEw

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Kendo MultiSelect replace comma with comma space</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/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/2016.1.112/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script></head>
<body>

  <select id="msCity" multiple="multiple" data-placeholder="Select Cities" >
    <option>Chicago</option>
    <option>Las Vegas</option>
    <option>Los Angeles</option>
    <option>New Jersey</option>
    <option>New York</option>
    <option>San Francisco</option>
  </select>
  <br />
  <br />
  <button id="btnGet" type="button" onclick="btnGetClick()">Get Value</button>
  <br />
  <br />
  <input id="result" type="text" style="width:100%" readonly />

  <script>

    //$(document).ready( function() {

            $('#msCity').kendoMultiSelect({ autoClose: false });

    //});

        function btnGetClick() {
        var selectedCities = "";
        selectedCities = $('#msCity').data("kendoMultiSelect").value().toString();
        $('#result').val(selectedCities.replace(",", ", "));
        }

    </script>

</body>
</html>

不幸的是，我的结果只替换了任何选择中的第一个逗号。

例如Chicago,New Jersey,San Francisco 变为 Chicago, New Jersey,San Francisco 第二个（和后续逗号）不会被替换。

有人知道为什么吗？

Answer 1

Unfortunately my result only replaces the first comma in any selection.

为了替换所有出现的模式，您可以更改：

selectedCities.replace(",", ", ")

至：

selectedCities.replace(/,/g, ', ')

片段：

$('#msCity').kendoMultiSelect({ autoClose: false });

function btnGetClick() {
    var selectedCities = "";
    selectedCities = $('#msCity').data("kendoMultiSelect").value().toString();
    $('#result').val(selectedCities.replace(/,/g, ', '));
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>


<select id="msCity" multiple="multiple" data-placeholder="Select Cities" >
    <option>Chicago</option>
    <option>Las Vegas</option>
    <option>Los Angeles</option>
    <option>New Jersey</option>
    <option>New York</option>
    <option>San Francisco</option>
</select>
<br />
<br />
<button id="btnGet" type="button" onclick="btnGetClick()">Get Value</button>
<br />
<br />
<input id="result" type="text" style="width:100%" readonly />

Kendo 多选值将逗号替换为逗号 + space

Kendo Multiselect value replace comma with comma + space

javascript

jquery

kendo-ui

kendo-multiselect