如何在jquery.sumoselect插件选择列表中添加更多元素? [英] How can I add more elements inside jquery.sumoselect plugin select list?

问题描述

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

I want to add more elements inside a list with multiple select checkboxes, but when I add more elements, they appear outside the list.

这是我要输入的代码:

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

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

I want the select option to be displayed like this:

推荐答案

根据您的评论，如果您希望将其放入列表中，可以按照以下步骤进行操作:

As per your comments if you want to put it inside list you can do it as below:

将其放置为第一个元素:

演示

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更改为按钮

If possible change your label Add to button

更新

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

Use your native plugin method as below:

演示

DEMO

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

这篇关于如何在jquery.sumoselect插件选择列表中添加更多元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！