ドロップダウンメニューからのポップ選択

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'); 
});