Получить выбранный текст опции из выбора пикера и добавить его в div на клике

Question

Я использовал селектор выбора для создания выпадающего списка города. Сейчас я делаю упражнение, в котором я должен получить выбранный текст опции и добавить его в div без запятой (,).

Если я выбрал

City1, City4, City5

Вот мой код выбора пикера:

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

Answer 1

Для добавления значения в 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>;';        
    }
});

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