从 select piker 获取 selected 选项文本并在单击时将其附加到 div

Question

我使用 select 选择器创建城市下拉列表。现在我正在做一个练习，我必须得到 selected 选项文本并将其附加到 div 而不带逗号 (,)。

如果我选择了

City1, City4, City5

这是我的 select 派克代码：

<select class="selectpicker citySelectPiker" name="city" id="city" multiple data-style="btn-white" data-live-search="true">
    <option value="1">City1</option>
    <option value="2">City2</option>
    <option value="3">City3</option>
    <option value="4">City4</option>
    <option value="5">City5</option>
</select>

现在点击我想要 selected 文本 div 是这样的：

<div id="job_desc_preview">
   <button class="btn btn-primary waves-effect waves-light btn-xs">City1</button>
   <button class="btn btn-primary waves-effect waves-light btn-xs">City4</button>
   <button class="btn btn-primary waves-effect waves-light btn-xs">City5</button>
</div>

我试过这个脚本：

 var city_string = $('.citySelectPiker').find('.filter-option').text();

基本上，我希望逗号分隔字符串的每个元素在不同的 div。

这里是 Div 点击我希望逗号分隔的字符串放在 div.

<button type="button" class="btn btn-info waves-effect" id="previewButton">Preview</button>

需要输出。

On this button click Want to get the selected(citySelectPiker) values and want to place that inside (job_desc_preview) div.

Answer 1

要实现这一点，您可以使用 map() 创建所选选项的文本内容的数组，然后 join() 将该数组放在一起，如下所示：

$('.citySelectPiker').change(function() {
  var selectedText = $(this).find('option:selected').map(function() {
    return $(this).text();
  }).get().join(',');
  
  console.log(selectedText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectpicker citySelectPiker" name="city" id="city" multiple data-style="btn-white" data-live-search="true">
    <option value="1">City1</option>
    <option value="2">City2</option>
    <option value="3">City3</option>
    <option value="4">City4</option>
    <option value="5">City5</option>
</select>

Answer 2

用于从逗号分隔的字符串中添加 div 中的值。

首先创建字符串：

$('.citySelectPiker').change(function() {
  var selectedText = $(this).find('option:selected').map(function() {
    return $(this).text();
  }).get().join(',');

  console.log(selectedText);
});

现在将该字符串拆分为一个数组。

var city_array = selectedText.split(',');

现在，将该数组值添加到 div。

$('#previewButton').click(function () {
    for (i = 0; i < city_array.length; i++) {       
        '<button class="btn btn-primary waves-effect waves-light btn-xs">' + city_array[i] + '</button>;';        
    }
});

从 select piker 获取 selected 选项文本并在单击时将其附加到 div

Get selected option text from select piker and append it to div on click

jquery

bootstrap-selectpicker