프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[소스] Select option를 버튼(div) 방식으로 변경하기

2019.02.21
개발자 입장에서 기능이나 작업시간 단축을 위해 이런게 필요할까? 하는 일이 종종 발생한다.
DB로 작성된 코드값들을 불러와 select 안에 option 값으로 넣어주기만 하면 끝나는 일이지만 필요로 하는 디자인과 기능은 그런게 아니었다.
그래서 DB에서 작성된 코드값들을 불러와 div를 생성하고 div를 클릭하면 자바스크립트로 선택된 div의 배경색을 변경하고 선택된 값을 input text에 값을 넣어주는 방식으로 만들었다.

길게는 썼지만 Select option을 버튼으로 만든 정도..

데모보기

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3507
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3497
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2161
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20761
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 52
225 [소스] Window.scroll() 꿘쓰 2020.06.22 57
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 93
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 169
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 321
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 516
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 613
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 585
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 571
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 678
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 669
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 870
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 619
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 663