从 "Bootstrap-Select" 获取价值

Question

我有一个 select 框，当我 select 选项时，它会使用 select 框的值更新输入框。这适用于 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());
}

从 "Bootstrap-Select" 获取价值

Get value from "Bootstrap-Select"

javascript

jquery

html

bootstrap-select