자바스크립트 트리거를 활용해 셀렉트박스 선택 값 변경


안녕하세요.
고코더 입니다.



자바스크립트로 프론트를 개발할때 특정 조건에 맞쳐 셀렉트 박스를 변경해야 하는 경우가 있습니다.
이때 사용자 대신 셀렉트 박스를 변경하고 싶다면 트리거를 사용하면 됩니다. 

 1.우선 아래 예제를 함께 살펴보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function triggerChagne(){
    $("#gocoder").val('g').trigger('change');
}
</script>
</head>
<body>
    <select id="gocoder">
        <option value="">셀렉트박스 선택</option>
        <option value="g">Go</option>
        <option value="c">Coder</option>
     </select>
</body>
</html>
cs

 1.해당 파일을 실행하면 화면과 같은 모습이 보입니다. 버튼을 클릭하면

 2.왼쪽 select box 가 변경 됩니다. 
$("#gocoder").val('g').trigger('change');
이 명령어가 해당 value 값을 가진 박스로 선택해주기 때문입니다.
트리거를 활용하면 chage 이벤트로 바인딩 됩니다.


마무리


트리거만 잘사용해도 편합니다.











댓글을 달아 주세요



검색 가능한 select 박스 


셀렉트 박스의 옵션이 많아지면 스크롤 길이도 어마 어마 하고 불편합니다.
오름순으로 정렬 하여 데이터를 나열하면 되지만.
우리의 클라이언트들은 참을성이 많지가 않습니다.



그래서 오늘은 아주 쓸만한 컴포넌트를 준비했습니다.
select2 라는 jquery 플러그인이다.
아래 홈페이지에서 자세한 정보를 찾아보자.

하지만 익스프레스하게 알려드리기 위해
아주 기초적이고 간단하게 코딩을 해보았습니다.

▼우선 아래처럼
select2.css , select2.js를 참조 시키자 그리고 jquery는 기본
1
2
<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>
cs

▼참고로 jquery 참조 URL은 외웁시다.
1
<script src="http://code.jquery.com/jquery.min.js"></script>
cs

http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.min.js

이렇게 3번 쓰면 외워집니다.

▼해당 선택자의 .select2();를 붙이면 작동합니다.
1
2
3
4
5
<script>
    $(document).ready(function () {
        $("#ee").select2();
    });
</script>
cs

▼소스의 합은 이렇습니다. 가장 기본적으로 알아보기 쉽게 만들어보았습니다.
<script src="http://code.jquery.com/jquery.min.js"></script>

<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function () {
            $("#ee").select2();
        });
    </script>
</head>
<body>
<select id="ee">
    <option value="">서태지</option>
    <option value="">양현석</option>
    <option value="">이주노</option>
</select>
</body>

▼첨부파일을 한폴더에 풀고 실행해보세요


▼클릭하면 셀렉트 박스이고 검색할 수 있는 검색창이 있네요







마무리



플러그인을 잘 사용하는 개발자가 됩시다.


댓글을 달아 주세요



ASP로 날짜 select 박스 만들기 


셀렉트 박스에 하드코딩으로 날짜를 입력할 경우가 있습니다.

그러지 말고 아래처럼 간단하게 Date 함수와 For문을 이용해서
날짜를 뿌리는 셀렉트 박스를 만들어 보자..

▼ 아래 소스를 IIS에서 실행해보자 
1
2
3
4
5
6
7
8
<select >
    <%
        For i = 0 To 5
            NowDate = Date + i
    %>
        <option value="<%=NowDate%>"><%=NowDate%></option>
    <%Next%>
</select>

cs



▼화면에서 본 모습



마무리


하드코딩은 무조건 피해야 합니다.


댓글을 달아 주세요



셀렉트 박스의 옵션 값과 텍스트 값 가져오기


셀렉트 박스를 다룰 때 간단하지만 자주 찾고 자주 까먹는 방법입니다.

options[target.selectedIndex].text  : 셀렉트 박스 옵션 사이에 있는 텍스트 값을 가져온다
options[target.selectedIndex].value : 셀렉트 박스 value 의 값을 가져온다.




▼ 아래처럼 하면은 셀렉트박스의 text 값과 value 값을 가져오는 방법이 됩니다.
<html>
<
body>
<
select name="selectBox" id="selectBox">
    <
option value="" selected>A</option>
    <
option value="">B</option>
    <
option value="">C</option>
</
select>
</
body>

<
script type="text/javascript">
   
var target = document.getElementById("selectBox");
    alert
('선택된 옵션 text =' + target.options[target.selectedIndex].text);     // 옵션 text
       
alert('선택된 옵션 value =' + target.options[target.selectedIndex].value);     // 옵션 value

</script>

</html>

▼ 예제 화면 





+고코더의 추천 강의


▼ select박스도 검색되게 해보세요!

-> http://gocoder.tistory.com/67?category=708022






마무리


셀렉트 박스의 option 값 말고도 text값을 이용해서 다양하게 프로그램을 만드셔도 좋은 방법입니다.

물런 필요하다면요.






















댓글을 달아 주세요



셀렉트 박스 값 변경하지 못하게 하기  (readonly)


select박스는 알다시피 readonly가 먹지가 않습니다.
그렇다고 disabled 를 하면 post로 넘어온 값을 받을 수 없습니다.
disabled로 인해 얼어 버린 select 박스는 고객 입장에서는 문제가 생겼나라는 생각이 듭니다.

그래서 오늘은 select box의 readonly 효과를 흉내내는 방법을 구현해봤다.

▼아래와 같이 onFocus와 onChange를 이용해
Readonly 와 같은 효과를 낼 수 있다.
<html>
<body>
<select onFocus='this.initialSelect this.selectedIndex;onChange='this.selectedIndex this.initialSelect; >
   <option 1</option>
   <option 2</option>
   <option 3</option>
</select>
</body>
</html>




▼다른 값을 선택한다고 해도 최초의 selected 된것을 하면 기존의 값 그대로 다시 선택 된다.



마무리


가을이네요^^ 취미가 있으신가요? 일도 좋지만 재밌어 하는것에도 미쳐보세요 



댓글을 달아 주세요