2017-04-19 4 views
6

私は選択ボックスを持っています。オプションを選択すると、選択ボックスの値で入力ボックスが更新されます。これは古いバージョンのBootstrap-Selectで動作しています。しかし、新しいバージョンではもう動作しません。私はこれを新しいバージョンで動作させる方法を探しています。ありがとう。"Bootstrap-Select"から値を取得

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(); 

答えて

5

1つの解決策は、すべての選択された値を得るためにおよび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(',')); 
1

以下でF2を置き換える:

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