首页 > 解决方案 > 如何使用 jquery 在 div 中显示多选值?

问题描述

我希望能够使用 jquery 显示从多选到空 div 的值。例如,在下面的代码中,我将如何使用 jquery 实现它?

<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm" class="selectnumber w-100 multiple searchable='Search here..'">
  <option>23</option>
  <option>17</option>
  <option>14</option>
  <option>11</option>
  <option>9</option>
</select>

<div class="numberselected">
  numbers selected should display here...
</div>

标签: javascriptjquery

解决方案


你可以在下面做一些事情

$(document).on('change', '.selectnumber', function(e){

var selected =   $('.selectnumber').val();
$('.numberselected').text(selected);


//console.log(selected);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm"
                        class="selectnumber w-100 multiple searchable='Search here..'">
                        <option>23</option>
                        <option>17</option>
                        <option>14</option>
                        <option>11</option>
                        <option>9</option>
                    </select><!-- End -->
                    <div class="numberselected">
                         //numbers selected should display here. 
                    </div>


推荐阅读