2017-08-10 171 views
1

我正在使用kendo Multiselect。默認返回的值是所選值的逗號分隔值。我想用逗號之間的空格顯示更易讀的格式。我的代碼....Kendo Multiselect值用逗號+空格替換逗號

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> 

不幸的是我的結果,卻取代了任何選擇的第一個逗號。

例如芝加哥,新澤西州,舊金山變成芝加哥,新澤西州,舊金山第二個(和隨後的逗號)不會被取代。

任何人都知道爲什麼?

回答

2

不幸的是,我的結果只取代了任何選擇中的第一個逗號。

爲了取代你的所有匹配模式您可以更改:

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 />

+0

謝謝....我一直認爲.replace在jQuery中取代了所有的實例,而不是第一個找到的......與.Replace在.Net中的相同 – Mych