如何自定义Jquery.sumoselect插件

Question

我使用jQuery SumoSelect plugin，我想将select标记自定义为自定义设计。

这是代码：

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

我想像这张图片一样自定义插件：

我怎样才能做到这一点？

有关该插件的更多信息：

  

SumoSelect或MultipleSelect（不支持）都不支持您的功能   正在看。但是，首先，需要做一些澄清：

     

<select>框是标准HTML标记，不接受其他标记   比<optgroup>或<option>。看这里：   https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

     

SumoSelect和MultipleSelect都是Javascript插件   使用javascript将“真实选择”转换为自定义构建的<div>标记   处理逻辑。也就是说，您可以修改/扩展它们   插件来创建所需的或你可以建立自己的   “<select>进入<div>转换器”。

     

但是，为了简单起见，您只需创建<div>即可   所有想要的功能，使用普通的普通旧复选框，和   根据您的用户体验流程/需求隐藏/显示整个<div>。