드롭 다운 메뉴에서 팝업 선택

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