從「Bootstrap-Select」獲得價值

Question

我有一個選擇框，當我選擇該選項時，它使用選擇框的值更新輸入框。這與舊版本的Bootstrap-Select一起工作。但在新版本中，它不再適用。我正在尋找一種方法來使其在更新的版本中工作。謝謝。

• 舊版本（工作）：http://jsfiddle.net/u967uwtf/
• 較新版本（不工作）：http://jsfiddle.net/9nzcLar6/

HTML：

<select class="selectpicker Categoria" multiple=""> 
    <option selected>A1</option> 
    <option selected>A2</option> 
    <option>A3</option> 
    <option>A4</option> 
</select> 
<input type="text" class="ChangeCategory" name="ChangeCategory"> 

JS：

$('select').selectpicker(); 

$(".Categoria").change(function() { 
    f2(); 
}); 

var f2 = function(){ 
    $('.ChangeCategory').val($(".Categoria").val()); 
} 
f2(); 

Answer 1

一個解決方案是使用Array.from()和map方法來獲取所有選定的值。

var values=Array.from($(".Categoria").find(':selected')).map(function(item){ 
    return $(item).text(); 
}); 

工作液

$('select').selectpicker(); 
 

 
$(".Categoria").change(function() { 
 
    f2(); 
 
}); 
 

 
var f2 = function(){ 
 
    var values=Array.from($(".Categoria").find(':selected')).map(function(item){ 
 
     return $(item).text(); 
 
    }); 
 
    $('.ChangeCategory').val(values); 
 
} 
 
f2();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/><select class="selectpicker Categoria" multiple=""> 
 
    <option selected>A1</option> 
 
    <option selected>A2</option> 
 
    <option>A3</option> 
 
    <option>A4</option> 
 
</select> 
 
<input type="text" class="ChangeCategory" name="ChangeCategory">

你可以做到這一點，而且，在一個單一的代碼行，使用arrow功能。

$('.ChangeCategory').val(Array.from($(".Categoria option:selected")).map(a=>$(a).text()).join(',')); 

Answer 2

下面替換F2：

var f2 = function(){ 
$('.ChangeCategory').val($(".Categoria option:selected").text()); 
}