如何在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>');
    }
});

如果可能，请更改标签的“ Add到”按钮

更新

使用您的本机plugin方法，如下所示：

DEMO

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