将SELECT Option的值和文本传递给按钮单击时输入的标签

Question

我正在开发一个简单的多用户邮件系统。系统上有多种用户和用户类别，因此我有多个<select>输入，他们可以从中选择用户，然后将其添加到recipient输入，这是一个标签输入。

然后我想使用AJAX将用户id传递给PHP函数。我想出了如何将id添加到recipients输入字段，但我希望用户看到用户名而不是他们的ID，但我想传递id。此外，当用户从recipients输入字段（删除标记）中删除用户时，我也希望删除该用户的ID。

如何通过传递ID但显示所选文本来实现此处理input tags？我知道如何在输入标签中显示所选项目的文本，但我怎样才能传递ID？另外我如何处理用户名删除标签，还删除相关的ID？

我的代码版本：

HTML

<div class="row">
    <select id="userlist1" class="form-control">
        <option value="none" selected="" disabled="">Select</option>
        <option value="1">John</option>
        <option value="2">Sarah</option>
        <option value="3">Bob</option>
    </select>
    <button id="btnaddfromuserlist1"> Add to Reciepients List</button>
</div>
<div class="row">
    <select id="userlist2" class="form-control">
        <option value="none" selected="" disabled="">Select</option>
        <option value="8">Richard</option>
        <option value="9">Hazel</option>
        <option value="10">Adam</option>
    </select>
    <button id="btnaddfromuserlist2"> Add to Reciepients List</button>
 </div>
 <div class="row">
     <input type="text" data-role="tagsinput" id="reciepients" >
 </div>

的jQuery

$("#btnaddfromuserlist1").click(function(){
    var userid= $("#userlist1").val();
    $('#reciepients').tagsinput('add', userid);
});

$("#btnaddfromuserlist2").click(function(){
    var userid= $("#userlist2").val();
    $('#reciepients').tagsinput('add', userid);
});