jQuery/jQuery 기본

select박스의 값에따라 change 로 값넣어주기 / 버튼 켰다 끄기

hyojinny 2022. 11. 28. 14:52

 

조건
.search_area  .search_top  input[type=text] 최초 value는 '전복죽'

select change 이벤트시 
value 가 BF101 = 전복죽 
 value 가 BF102  쇠고기야채죽
 value 가 BF104 광양식바싹불고기 반상
 value 가 BF105 양곱창뚝배기

switch 문 사용

 

  var searchInput = $('.search_area_wrap .search_top input[type=text]');
  searchInput.val('전복죽');

  $('.search_area_wrap .search_top .select_wrap select').on('change', function () {
    var _val = $(this).val();
    console.log(_val);

    switch (_val) {
      case '':
        searchInput.val('전복죽');
        break;

      case 'BF101':
        searchInput.val('전복죽');
        break;

      case 'BF102':
        searchInput.val('쇠고기야채죽');
        break;

      case 'BF104':
        searchInput.val('광양식바싹불고기 ');
        break;

      case 'BF105':
        searchInput.val('양곱창뚝배기');
        break;
    }
  });

 


  // 검색어삭제 트리거로 포커스 될때 내용지우기
  $('.search_area_wrap .search_top .btn_clear').on('click', function () {
    searchInput.val('').trigger('focus');
    $(this).hide();
  });

 

 

 

조건
searchInput에서 키를 누를때마다 searchInput 의 value 판단하여
빈칸이면 .btn_clear을 안보이게
빈칸이 아니면 보이게

  searchInput.on('keyup', function (e) {
    console.log(e.key);
  });

 

 

 

 

 

 

  searchInput.on('keyup', function () {
    if ($(this).val()) {
      $('.search_area_wrap .search_top .btn_clear').show();
    } else {
      $('.search_area_wrap .search_top .btn_clear').hide();
    }
  });