jquery selected plugin - 添加不显示字段

Question

我正在为 Multi Select 使用 jquery 选择的插件。我的选择看起来像这样：

<select data-placeholder="chose a friend" class="chosen-select" multiple>

    <?php   

        foreach ($my_friends as $key => $value) {

            echo '<option class="friend_firstname">'.$value["name"].'</option>';        

        }

    ?>  

</select>   

完美运行，插件返回：

<ul class="chosen-choices">
    <li class="search-choice">
        <span>John</span>
        <a class="search-choice-close" data-option-array-index="1"></a>
    </li>
</ul>

我的问题是我想添加额外的信息，显示无：

<ul class="chosen-choices">
    <li class="search-choice">
        <span>John</span>
        <span style="display:none" id="user_id">678</span>
        <a class="search-choice-close" data-option-array-index="1"></a>
    </li>
</ul>

我在这里迷路了。如何在 display none 中添加其他信息？

感谢您的帮助

Answer 1

如果只是表单提交，则要提交的值应该存在名称属性。也像这样为选项元素添加价值

<select name="friend" data-placeholder="chose a friend" class="chosen-select" multiple>
  <?php   
    foreach ($my_friends as $key => $value) {
      echo '<option class="friend_firstname" value="'.$value["id"].'">'.$value["name"].'</option>';        
    }
  ?>  
</select>  

如果提交了表单，数据将以数组的形式提交（如果选择了多个项目）。

这是一个示例

$(".chzn-select").chosen();
$('form').on('submit', function(e) {
  e.preventDefault();
  alert($(this).serialize());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<form method="POST" action="/echo/json">
  <select data-placeholder="Choose a friend..." class="chzn-select" multiple style="width:350px;" name="friend">
    <option value="id1">Friend1</option>
    <option value="id2">Friend2</option>
    <option value="id3">Friend3</option>
  </select>
  <input type="submit" value="submit" name="submit" />
</form>