javascript - 从下拉菜单中弹出选择

Question

我有一个关于从菜单下拉菜单中弹出选择的问题。我有一个动态填充人员姓名的下拉菜单，我希望所选的姓名从下拉菜单中弹出并显示在其旁边的 div 中。下拉菜单:

       <div class="col-md-4">
          <div class="dropdown">
            <button style="width: 100%;" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Group Members
            <span class="caret"></span></button>
            <ul class="dropdown-menu scrollable-menu" role="menu">
            {{#each users}}
              <li data-uid={{this.u_id}}>{{this.full_name}}</li>
            {{/each}}
            </ul>
          </div>
        </div>

我希望显示信息(名称)的 div:

        <div class="col-lg-4">
          <h2 class="text-center" style="margin-top: 0;">Selected Group Members</h2>
          <ul class="list-unstyled">
            <li data-uid={{this.u_id}} class="text-center">{{this.full_name}}</li>
          </ul>
        </div>

我想象这可以通过一些 jQuery 来完成，不幸的是我不太擅长，所以我不太确定如何做到这一点。如有任何帮助，我们将不胜感激!

Answer 1

这应该可以完成工作。请检查。

// selected element
var selections = [];
// container that holds selections 
var listContainer = $('.container .list-unstyled');

// sorting array of objects by provided field
var sortBy = function (arr, field) {
    return arr.sort(function (a, b) {
       if (a[field].toLowerCase() < b[field].toLowerCase()) return -1;
       if (a[field].toLowerCase() > b[field].toLowerCase()) return 1;
       return 0;
    });
};

// redraw list on container
var reorder = function(){
   listContainer.html('');
   for(var i = 0; i < selections.length; i++){
      listContainer.append('<li data-uid=' + selections.id + '>' + selections.value + '</li>');
   }
}

// list items click handler
$('ul.list-unstyled li').click(function(){
   selections.push({
      id: $(this).attr('data-uid'),
      value: $(this).text()
   });

  selections = sortBy(selections, 'name');
});