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