javascript - 如何在 jquery.sumoselect 插件选择列表中添加更多元素？

Question

我想在具有多个选择复选框的列表中添加更多元素，但是当我添加更多元素时，它们会出现在列表之外。

这是我要放入的代码:

<div class="select-box-style right">
    <div class="your-list-title">Your Lists</div>
    <select multiple="multiple" class="md_what_get right SlectBox">
        <option selected value="electronics">Electronics</option>
        <option value="games">Video Games</option>
        <option value="books">Books</option>
        <option value="others">Others</option>
    </select>
    <div class="add-list-box">
        <input type="text" class="input-add-list" />
        <label class="label-spcbtn-blue spr">Add</label>
    </div>
</div>

我希望选择选项显示如下:

Answer 1

根据您的评论，如果您想将其放入列表中，可以按如下方式操作:

将其作为第一个元素:

<强> DEMO

$('.spr').on('click',function(){
    if($('.input-add-list').val().trim()!=='')
    {
        $('<option value="'+$('.input-add-list').val().trim()+'">'+$('.input-add-list').val().trim()+'</option>').insertBefore('.SlectBox option:first');
    }
});

将其作为最后一个元素

<强> DEMO

$('.spr').on('click',function(){
    if($('.input-add-list').val().trim()!=='')
    {
        $('.SlectBox').append('<option value="'+$('.input-add-list').val().trim()+'">'+$('.input-add-list').val().trim()+'</option>');
    }
});

If possible change your label Add to button

更新

使用您的 native 插件方法，如下所示:

<强> DEMO

$('.spr').on('click',function(){
    if($('.input-add-list').val().trim()!=='')
    {
        $('select.SlectBox')[0].sumo.add($('.input-add-list').val().trim());
    }
});