从“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()); 
}