我有一个选择框,当我选择该选项时,它会使用选择框的值更新输入框。这适用于旧版本的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();
答案 0 :(得分:5)
一种解决方案是使用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();
&#13;
<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">
&#13;
您也可以使用arrow
函数在一行代码中执行此操作。
$('.ChangeCategory').val(Array.from($( ".Categoria option:selected" )).map(a=>$(a).text()).join(','));
答案 1 :(得分:1)
用以下代替f2:
var f2 = function(){
$('.ChangeCategory').val($( ".Categoria option:selected" ).text());
}