0

我使用选择器来创建城市下拉列表。现在我正在做一个练习，我必须获取选定的选项文本并将其附加到不带逗号（，）的 div 中。

如果我选择了

城市 1、城市 4、城市 5

这是我选择的派克代码：

<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>

现在单击时，我希望 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>

所需的输出。

在此按钮上单击想要获取选定的 ( citySelectPiker ) 值并希望将其放置在 ( job_desc_preview ) div 中。

4

2 回答 2

2

为此，您可以使用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>

于 2017-06-22T11:55:54.833 回答
0

用于从逗号分隔的字符串在 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>;';        
    }
});
于 2017-06-22T12:54:11.110 回答