如何实现带主邮箱标记、新增邮箱的Select2与Multiselect兼容组件

我需要实现如下UI功能：

• 用户可查看多选下拉框，勾选多个邮箱，同时能通过右侧操作将其中一个标记为主邮箱ID（仅可标记一个）

核心需求：

1. 可勾选下拉框中的多个邮箱
2. 可从选中的邮箱中选择/标记一个作为主邮箱

附加需求：

• 用户支持输入搜索邮箱，且可添加下拉列表中不存在的新邮箱

提交要求：
提交时需获取所有选中的邮箱ID，并区分出主邮箱ID

我用jQuery的.multiselect插件仅实现了多选下拉框，没办法添加主邮箱标记功能和新增邮箱功能。

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="shared_email_textbox spot_quote_email_drop_down share_quote_client_email" multiple>
    <option value="">Select Client</option>
    {% for client in clients %} 
    '<option value="{{client.id}}" data-name="{{client.first_name}}" data-company_name="{{client.company_name|default_if_none:''}}" data-mobile_number="{{client.mobile_number|default_if_none:''}}" data-country_id="{{client.country_id}}" data-country_short_name="{{client.country_short_name}}"data-client-type="{{client.user_sub_type}}">{{client.email}}</option>
    {% endfor %}
</select>

JavaScript代码 #

$('.share_quote_client_email').multiselect({
    placeholder: 'Select Emails',
    search: true,
    selectAll: true,
});
var options = $('#share_quote_modal_client_container').find('.ms-options').find('li');
if (options.length > 0) {
    options.each(function(index) {
        debugger;
        const htmlContent = '&emsp;&emsp;&emsp;<span class="fa fa-star-o"></span> <a href="#">Mark as Primary</a>';
        const existingLabel = $(this).find('label');
        existingLabel[0].innerHTML += htmlContent;
    });
}

内容的提问来源于stack exchange，提问作者Karan Shrestha