如何用jQuery将selectpicker多选下拉框的选中文本显示到输入框？

我来帮你搞定这个需求！你的代码目前的问题是把选中项存成了以value为键的对象，直接赋值给输入框会显示[object Object]，而且没有按照@选中名称的格式处理。下面是调整后的完整代码，同时实现了点击加号打开下拉框、选中后文本按要求显示的功能：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>

<!-- 添加加号按钮，用于打开下拉框 -->
<button class="btn btn-default open-select">+</button>

<select id='recruiter' name="recruiter" class="selectpicker" multiple>
  <optgroup label="Camping">
    <option value="1">Tent</option>
    <option value="2">Flashlight</option>
    <option value="3">Toilet Paper</option>
  </optgroup>
  <optgroup label="fruits">
    <option value="6">apple</option>
    <option value="7">orange</option>
    <option value="8">banana</option>
  </optgroup>
</select>

<input type="text" class="width-100 chat-borderTB pad-5" placeholder="comment" aria-describedby="sizing-addon2" name="msg" id="msg">

<script type="text/javascript">
// 点击加号按钮打开下拉框
$('.open-select').click(function() {
  $('#recruiter').selectpicker('toggle');
});

// 下拉框选中变化时更新输入框
$("#recruiter").on("change",function(){
  update();
});

function update() {
  var selected = [];
  // 遍历所有选中的选项，收集带@前缀的文本
  $('#recruiter :selected').each(function(){
    selected.push('@' + $(this).text());
  });
  // 把数组转成空格分隔的字符串，赋值给输入框
  $("#msg").val(selected.join(' '));
}
</script>

关键调整说明： #

1. 加号按钮功能：新增了一个加号按钮，通过selectpicker('toggle')方法触发下拉框的展开/收起，满足你“点击加号打开下拉框”的需求，且按钮会一直保留在页面上。
2. 选中文本格式化：修改了update函数，用数组收集每个选中项的文本，并为每个文本添加@前缀，最后通过join(' ')把所有项拼接成空格分隔的字符串，这样输入框就会显示@Tent @Flashlight这种符合要求的格式。
3. 避免对象赋值问题：原来的代码把选中项存成了对象，直接赋值会导致输入框显示[object Object]，现在改用数组收集并拼接成字符串，完美解决这个问题。

内容的提问来源于stack exchange，提问作者Sam