버튼을 select box 처럼 보이기

 

 

 

<div data-id="cardlist" class="card-select-box">
                                  <input type="hidden" data-name="CardCode" name="CardCode" value="" />
                                  <div class="card-select__checked icon">
                                      <div data-id="selectCardTitle" id="card_list"  style="cursor:hand;">
                                          <span class="icon"></span>
                                          <span class="title">카드선택</span>
                                      </div>
                                      <!--
                                      <button type="button" data-id="openCardList" id="openCardList" class="btn js-arrow">
                                           <span class="arrow"></span>
                                      </button>
                                      -->
                                  </div>
                                  <div class="card-select__list">
                                      <ul data-id="cardSelectList"></ul>
                                  </div>
                              </div>

 

 

 

스크립트 부분

 

<script type="text/javascript">
 /** 카드 선택 **/
 var cardListAry = [
      { id: 'BCC', title: 'BC카드' },
      { id: 'WIN', title: '삼성카드' },
      { id: 'HNB', title: '하나카드' },
      { id: 'CNB', title: '국민카드' },
      { id: 'KEB', title: 'KEB하나카드' },
      { id: 'CIT', title: '시티카드(구한미)' },
      { id: 'DIN', title: '현대카드' },
      { id: 'AMX', title: '롯데/아맥스카드' },
      { id: 'NLC', title: 'NH카드' },
      { id: 'NFF', title: '수협카드' },
      { id: 'LGC', title: '신한카드' },
      { id: 'SIN', title: '신세계카드' },
      { id: 'KJB', title: '광주은행카드' },
      { id: 'CBB', title: '전북은행카드' },
      { id: 'CJB', title: '제주은행카드' },
      { id: 'SYH', title: '신협체크카드' },//
      { id: 'PHB', title: '우리카드' },
 //  { id: 'saneun', title: 'KDB산업은행카드' },
 //  { id: 'saneun', title: '신은캐피탈' },
 //  { id: 'kakao', title: '카카오뱅크' },
 //  { id: 'post_office', title: '우체국카드' },
 //  { id: 'standard', title: '스탠다드차티드은행카드' },
 //  { id: 'mg', title: 'MG체크카드' },
 //  { id: 'hyundai_stock', title: '현대증권카드' },
 //  { id: 'ibk', title: '기업은행카드' },
 ];
 
 // 카드 목록 생성
 var cardHtml = '';
 var setcardLIst = function() {
   var i = 0;
   var leng = cardListAry.length;
   cardHtml = '';
 
   for ( i ; i < leng; i++ ) {
     cardHtml += '<li>';
     cardHtml += '   <button type="button" data-id="cardSelect" data-key="'+ i +'" class="btn js-card">';
     cardHtml += '       <span class="icon"><img alt="" src="/front/event/img/card_icons/icon_'+ cardListAry[i].id +'.png" /></span>';
     cardHtml += '       <span class="title">'+cardListAry[i].title+'</span>';
     cardHtml += '   </button>';
     cardHtml += '</li>';
   }
   $('[data-id="cardSelectList"]').append(cardHtml);
 };
 setcardLIst();
 
 // 카드 선택
 $('[data-id="cardSelect"]').click(function() {
   var selectCardHtml = ''
   var key = Number($(this).data('key'));
   selectCardHtml += '<span class="icon"><img alt="" src="/front/event/img/card_icons/icon_'+ cardListAry[key].id +'.png" /></span>';
   selectCardHtml += '<span class="title">'+cardListAry[key].title+'</span>';
 
   $('[data-name="CardCode"]').val(cardListAry[key].id);
   $('[data-id="selectCardTitle"]').html('').append(selectCardHtml);
   $("#card_list").trigger("click");
 });
 
 
 
 // 카드 목록  show/hide
 $('#card_list').click(function() {
   $(this).parent().parent().toggleClass('on');
 });