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

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

这是我想输入的代码：

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

你的名单
数码产品
电子游戏
书
其他
添加

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

---

根据您的评论，如果您想将其放在列表中，您可以按如下操作：

将其作为第一个元素：

$('.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');
    }
});

$('.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>');
    }
});

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

---

根据您的评论，如果您想将其放在列表中，您可以按如下操作：

将其作为第一个元素：

$('.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');
    }
});

$('.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>');
    }
});

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

---

---

您这样做是为了什么？您可能还需要添加

css

@ozil我想要一个像图片@GuruprasadRao这样的列表是的，但不是现在我想在添加css样式之前把这个元素放在列表中元素在外面你这样做是为了什么？你可能也需要添加

css

@ozil我想要一个像图片@GuruprasadRao这样的列表是的，但不是现在我想在添加css样式之前把这个元素放在列表中元素在外面你这样做是为了什么？你可能也需要添加

css

@ozil我希望这个列表像图片@GuruprasadRao是的，但不是现在我想在添加css样式之前将这个元素放在列表中元素在外面我这样放置：`$（'.spr'）。on（'click'，function（）{if（$（'.input add list'）.val（）.trim（）！==''''{$（'+$（'.input add list'）.val（）.trim（））+'=''）.insertBefore（'.SlectBox选项：first'）；}}}）；`select元素之前和select元素之后的secont脚本不起作用！？！你知道如何添加它了吗？你看到了变化吗？不起作用了看忽略按钮标签“add”作为一个按钮看她作为一个简单的div和忽略。spr像一个事件点击不是点击只是为了看它我想把元素放在列表中就像我的问题中的图像我这样写：`$（'.spr'）。on（'click'，function（）{if（$（'.input add list'）.val（）.trim（）！=''）{$（''+$（'.input add list'）.val（）.trim（）+''）.insertBefore（'.SlectBox选项：first'）；}；`select之前和select元素之后的secont脚本不起作用！？！您知道如何添加它吗？您看到更改了吗？不起作用吗？请忽略按钮标签“添加”作为一个按钮，将她视为一个简单的div并忽略。spr像事件一样单击不是单击只是为了看它我想把元素放在列表中就像我的问题中的图像一样我这样放置：`$（'.spr'）。on（'click'，function（）{if（$（'.input add list'）.val（）.trim（）！==''{$（'+$（'.input add list'）.val（）.trim（）+）=''）.insertBefore（'.SlectBox option:first'）；}}}）；`select之前和select元素之后的secont脚本不起作用！？！您知道如何添加它吗？您看到更改了吗？看起来不起作用忽略按钮标签“add”作为一个按钮，将她视为一个简单的div并忽略。spr像事件一样单击并不是单击只是为了查看，我只想将元素放在列表中，就像我问题中的图像一样