Jquery 多选为每个选定的值创建 div

Question

我有一个 multiselect 有超过 20 个选项。当用户 select 一个选项时，它会为每个 selected 项目创建一个 div 选项名称 selected。示例：用户 select“伦敦”和“巴黎”，它创建了两个 div，其中写着“伦敦”和“巴黎”。
如果我使用 $("#multiselect").val() 它会给我一个数组，所以我得到一个 div。知道如何用 Jquery 做到这一点吗？

Answer 1

你可以这样做：

$('select').change(function() {
  var optionsselected = $(this).val();
  $('.divContainer').html("");
  $.each(optionsselected,function(i,x) {
    $('.divContainer').append('<div>'+x+'</div>')
  });
})

演示

$('select').change(function() {
  var optionsselected = $(this).val();
  $('.divContainer').html("");
  $.each(optionsselected,function(i,x) {
    $('.divContainer').append('<div>'+x+'</div>')
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
<option>London</option>
<option>Paris</option>
</select>

<div class="divContainer"></div>

Jquery 多选为每个选定的值创建 div

Jquery multiselect create div for each value selected

javascript

arrays

jquery

multi-select