본문 바로가기

셀렉트박스5

jQuery - trigger()로 select 박스 선택 값 변경하기 자바스크립트 트리거를 활용해 셀렉트박스 선택 값 변경 안녕하세요.고코더 입니다. 자바스크립트로 프론트를 개발할때 특정 조건에 맞쳐 셀렉트 박스를 변경해야 하는 경우가 있습니다.이때 사용자 대신 셀렉트 박스를 변경하고 싶다면 트리거를 사용하면 됩니다. ● 1.우선 아래 예제를 함께 살펴보겠습니다.1234567891011121314151617function triggerChagne(){ $("#gocoder").val('g').trigger('change');} 셀렉트박스 선택 Go Coder Colored by Color Scriptercs ● 1.해당 파일을 실행하면 화면과 같은 모습이 보입니다. 버튼을 클릭하면 ● 2.왼쪽 select box 가 변경 됩니다. $("#gocoder").val('g')... 2019. 10. 17.
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.
ASP - select 박스 for문으로 날짜 뿌리기 ASP로 날짜 select 박스 만들기 셀렉트 박스에 하드코딩으로 날짜를 입력할 경우가 있습니다. 그러지 말고 아래처럼 간단하게 Date 함수와 For문을 이용해서날짜를 뿌리는 셀렉트 박스를 만들어 보자.. ▼ 아래 소스를 IIS에서 실행해보자 12345678 cs ▼화면에서 본 모습 마무리하드코딩은 무조건 피해야 합니다. 2017. 9. 1.
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.