제이쿼리 셀렉옵션 커스텀

셀렉옵션 분석하기 

 

토글이 아닌 a로 감고 리스트형식

분석

 

 

---

본아이에프는 버튼식을 넣었음

 

---

 

롯데몰의 셀렉옵션을 응용하여 본아이에프에 적용해보기

 

 

 

 

 

  $('.select_custom .select a').on('click', function () {

   

    console.log($(this).text());

 

 

  // select 커스텀
  $('.select_custom .btn_select').on('click', function () {
    $(this).toggleClass('on');
    $('.select_custom .select').toggle();
  });

 

 

 

 

 

 

 

 

 

 

 

 

 

 

html 메서드는 태그 까지 다 가지고옴 

 

 

  $('.select_custom .select a').on('click', function () {

    // $(this).text();

    console.log($(this).html());

  });

 

 

 

 

 

 

 

셀렉에서 옵션 선택시 

글자가 선택되게 만들기 

 

 

 

  $('.select_custom .select a').on('click', function () {

    $('.select_custom .btn_select').text($(this).text());

  });

 

$('.select_custom .select').hide();

 

 

선택시 조상을 닫아줌

 

 

 

선택시 선 날라가게

 

on 이 선택되어있기 때문에 

    $('.select_custom .btn_select').text($(this).text()).removeClass('on'); 

 

메서드 체인으로 removeClass 추가

 

 

 

 

  // select 커스텀
  $('.select_custom .btn_select').on('click', function () {
    $(this).toggleClass('on');
    $('.select_custom .select').toggle();
  });

  $('.select_custom .select a').on('click', function () {
    // 클릭한 a의 텍스트를 위쪽 a에 넣어줌
    $('.select_custom .btn_select').text($(this).text()).removeClass('on');
    $('.select_custom .select').hide();
  });