selectbox3 jQuery | Plugin - select 박스 검색 가능하게 검색 가능한 select 박스 셀렉트 박스의 옵션이 많아지면 스크롤 길이도 어마 어마 하고 불편합니다.오름순으로 정렬 하여 데이터를 나열하면 되지만.우리의 클라이언트들은 참을성이 많지가 않습니다. 그래서 오늘은 아주 쓸만한 컴포넌트를 준비했습니다.select2 라는 jquery 플러그인이다.아래 홈페이지에서 자세한 정보를 찾아보자.https://select2.org/ 하지만 익스프레스하게 알려드리기 위해아주 기초적이고 간단하게 코딩을 해보았습니다. ▼우선 아래처럼select2.css , select2.js를 참조 시키자 그리고 jquery는 기본12cs ▼참고로 jquery 참조 URL은 외웁시다.1cs http://code.jquery.com/jquery.min.jshttp://code.jquery.c.. 2017. 11. 2. JavaScript - select 박스의 option value, text 가져오기 셀렉트 박스의 옵션 값과 텍스트 값 가져오기 셀렉트 박스를 다룰 때 간단하지만 자주 찾고 자주 까먹는 방법입니다. options[target.selectedIndex].text : 셀렉트 박스 옵션 사이에 있는 텍스트 값을 가져온다options[target.selectedIndex].value : 셀렉트 박스 value 의 값을 가져온다. ▼ 아래처럼 하면은 셀렉트박스의 text 값과 value 값을 가져오는 방법이 됩니다. A B C var target = document.getElementById("selectBox"); alert('선택된 옵션 text 값=' + target.options[target.selectedIndex].text); // 옵션 text 값 alert('선택된 옵션 value.. 2017. 8. 31. JavaScript - select readonly 적용 셀렉트 박스 값 변경하지 못하게 하기 (readonly) select박스는 알다시피 readonly가 먹지가 않습니다.그렇다고 disabled 를 하면 post로 넘어온 값을 받을 수 없습니다.disabled로 인해 얼어 버린 select 박스는 고객 입장에서는 문제가 생겼나라는 생각이 듭니다. 그래서 오늘은 select box의 readonly 효과를 흉내내는 방법을 구현해봤다. ▼아래와 같이 onFocus와 onChange를 이용해Readonly 와 같은 효과를 낼 수 있다. 1 2 3 ▼다른 값을 선택한다고 해도 최초의 selected 된것을 하면 기존의 값 그대로 다시 선택 된다. 마무리가을이네요^^ 취미가 있으신가요? 일도 좋지만 재밌어 하는것에도 미쳐보세요 2017. 8. 30. 이전 1 다음
