본문 바로가기
프로그래밍/jQuery

제이쿼리(jQuery) Select(셀렉트 박스) 사용법 정리

루미오 2018. 12. 16. 21:02

안녕하세요. 루미오입니다.

jQuery에서의 Select 사용법을 정리해 보겠습니다.

 

순서
● HTML Select 선언
● 변경 감지 (Change Event)
● Value 알아내기
● Value 바꾸기
● 개수 확인
● Select Box Disabled
● Option Disabled
● 전체 Source Code & 바로 Test [jsfiddle]

 

하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다.

 

● HTML Select 선언

<select id="slctColors" name="slctColors">
    <optgroup label="- Red Colors">
        <option value="#cd5c5c" selected>Indian-Red</option>
        <option value="#ff0000" disabled>Red</option>
        <option value="#8b0000">Dark-Red</option>
    </optgroup>
    <optgroup label="- Green Colors">
        <option value="#90ee90">Light-Green</option>
        <option value="#008000">Green</option>
        <option value="#006400">Dark-Green</option>
    </optgroup>
    <optgroup label="- Blue Colors">
        <option value="#add8e6">Light-Blue</option>
        <option value="#0000ff">Blue</option>
        <option value="#00008b">Dark-Blue</option>
    </optgroup>
    <option value="#808080">Gray</option>
    <option value="#000000">Black</option>
</select>

<select> tag를 사용하고 id, name, value를 설정할 수 있습니다. check 되거나 check를 설정하려면 checked를 설정하고, 비활성화시킬 때는 disabled를 설정하면 됩니다. 가끔 checked="checked"나 disabled="disabled"로 설정하는 경우가 있는데 이런 경우는 XHTML을 사용할 때만 사용하며, 요즘은 잘 사용하지 않습니다. <option> tag를 사용해서 select-box의 컬럼들을 설정하며 value attribute를 사용해서 값을 설정합니다. 물론 id와 name을 <option> tag에도 필요하다면 사용할 수 있습니다. <optgroup> tag는 필수 요소는 아니지만 <option>컬럼들을 group 별로 구분할 때 사용하면 유용합니다. 아래 코드는 지금 선언한 HTML을 기준으로 작성했습니다.

 

● 변경 감지 (Change Event)

/* Checkbox change event */
$('#slctColors').change(function() {
    var value = $(this).val();
    $(this).css('color', value);
});

Change Event를 만들 때는 jQuery의 change() 함수를 사용합니다. 함수에서 this는 변경이 발생한 element를 나타내며, $(this)는 this를 jQuery element로 만든 겁니다. 그래야 jQuery 함수를 사용할 수 있습니다. value를 알아내기 위해서 val() 함수를 사용했습니다.

 

● Value 알아내기

/* Selected Value */
var text = $('#slctColors option:selected').text();
var value = $('#slctColors').val();

/* Deselected Values */
var str = "";
$('#slctColors option:not(:selected)').each(function(){
    var text = $(this).text();
    var value = $(this).val();
    str += text + "/" + value + ", ";
});

Select-box의 선택된 값을 알아낼 때는 val() 함수를 사용했고, text를 알아내기 위해서 CSS Selector를 이용했습니다.

 

● Value 바꾸기

/* Blue로 바꾸기 */
$('#slctColors').val('#0000ff');

// value는 모르고 text만 알때
$('#slctColors option').each(function() {
    if($(this).text() == 'Blue')
        $(this).prop('selected', true);
});


/* 5번째(Green)로 바꾸기 */
$('#slctColors option:eq(4)').prop('selected', true);	// CSS Selector eq로 찾기
$('#slctColors option').eq(4).prop('selected', true);	// jQuery eq() function 사용

value를 변경할 때도 val() 함수를 사용하고 있습니다. value는 모르고 text만 알 때는 어쩔 수 없이 모든 <option> 컬럼들을 순회하면서 값을 비교해야 하는데, 이런 경우에는 id나 name을 잘만 사용한다면 좀 더 편하고 빠르게 해당 컬럼을 찾을 수 있겠지요! (힌트 : attr("id")를 사용하면 전체 컬럼을 순회하지 않아도 해당 컬럼을 찾을 수 있습니다) 값도 text도 모르고 index만 알 경우에는 CSS Selector의 :eq()나 jQuery의 eq()함수를 사용하면 간단히 해결됩니다. 물론 prop() 함수를 이용해서 Value를 바꾸게 됩니다.

 

● 개수 확인

/* 전체 option 개수 */
var num = $('#slctColors option').length;

/* 전체 Selected option 개수 */
var num = $('#slctColors option:selected').length;

/* 전체 Selected option 개수 */
var num = $('#slctColors option:not(:selected)').length;

<option>의 개수를 확인하기 위해서 length를 사용했습니다.

 

● Select Box Disabled

/* Select 여부 확인 */
var b = $('#slctColors').prop('disabled');		// jQuery 1.6 이상 (jQuery 1.6 미만에는 prop()가 없음, checked, selected, disabled는 꼭 prop()를 써야함)
// var b = $('#slctColors').attr('disabled');	// jQuery 1.6 미만 (jQuery 1.6 이상에서는 checked, undefined로 return됨)
// var b = $('#slctColors').is('disabled');


/* Select Disabled 설정 */
$('#slctColors').prop('disabled', true);

/* Select Disabled 해제 */
$('#slctColors').prop('disabled', false);

/* Select Disabled 반전 */
$('#slctColors').prop('disabled', !$('#slctColors').prop('disabled'));

비활성화 여부를 확인하거나 설정할 때는 prop() 함수를 사용하면 됩니다. disabled 상태를 확인할 때 사용할 수 있는 함수가 3개 있습니다. 먼저 prop() 함수는 jQuery 1.6 이상에서 사용합니다. checked, selected, disabled 같이 attribute의 이름을 별도로 지정하지 않는 경우에 사용하면 됩니다. attr()을 사용하면 undefined를 보게 됩니다. 하지만 jQuery 1.6 미만에서는 prop() 함수가 없기 때문에 attr()을 사용해야 합니다. is() 함수는 attribute의 값을 알아내기 위한 함수가 아니고, element를 검사하는 함수이기 때문에 이 경우에 사용하면 속도 면에서 손해를 보게 됩니다. 상태를 반전시킬 때 !를 사용했습니다.

 

● Option Disabled

/* Red Disabled 여부 확인 */
var b = false;
// value로 찾기
b = $('#slctColors option[value="#ff0000"]').prop('disabled');

// value는 모르고 text만 알때
// $('#slctColors option').each(function() {
// 	if($(this).text() == 'Red')
// 		b = $(this).prop('disabled');
// });


/* Red Disabled 설정 */
$('#slctColors option[value="#ff0000"]').prop('disabled', true);

/* Red Disabled 해제 */
$('#slctColors option[value="#ff0000"]').prop('disabled', false);

/* Red Disabled 반전 */
var $optionRed = $('#slctColors option[value="#ff0000"]');
$optionRed.prop('disabled', !$optionRed.prop('disabled'));

/* 전체 Option Disabled 설정 */
$('#slctColors option').each(function() {
    $(this).prop('disabled', true);
});

/* 전체 Option Disabled 해제 */
$('#slctColors option').each(function() {
    $(this).prop('disabled', false);
});

/* 전체 Option Disabled 반전 */
$('#slctColors option').each(function() {
    $(this).prop('disabled', !$(this).prop('disabled'));
});

<option>의 disabled의 확인 설정 방법도 위처럼 간단합니다.

 

● 전체 Source Code & 바로 Test [jsfiddle]

Test를 바로 해볼 수 있도록 만든 Code입니다. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>029 : 제이쿼리(jQuery) Select(셀렉트 박스) 사용법 정리</title>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> -->

		<script type="text/javascript">
			$(document).ready(function() {
				$('button').click(function() {
					$('#output').text('');
				});


				/* ==== # Checkbox Change Event ==== */
				/* Checkbox change event */
				$('#slctColors').change(function() {
					var value = $(this).val();
					$(this).css('color', value);
				});


				/* ==== # Value 알아내기 ==== */
				/* Selected Value */
				$('#btnSelectedValue').click(function() {
					var text = $('#slctColors option:selected').text();
					var value = $('#slctColors').val();
					$('#output').text("Selected Value : " + text + "/" + value);
				});

				/* Deselected Values */
				$('#btnDeselectedValues').click(function() {
					var str = "";
					$('#slctColors option:not(:selected)').each(function(){
						var text = $(this).text();
						var value = $(this).val();
						str += text + "/" + value + ", ";
					});
					$('#output').text("Deselected Values : " + str);
				});


				/* ==== # Value 바꾸기 ==== */
				/* Blue로 바꾸기 */
				$('#btnChangeValue').click(function() {
					$('#slctColors').val('#0000ff');

					// value는 모르고 text만 알때
					// $('#slctColors option').each(function() {
					//	if($(this).text() == 'Blue')
					//		$(this).prop('selected', true);
					// });

					$('#slctColors').trigger('change');	// change event를 발생시킨다.
				});

				/* 5번째(Green)로 바꾸기 */
				$('#btnChange5index').click(function() {
					// CSS Selector eq로 찾기
					// $('#slctColors option:eq(4)').prop('selected', true);	// index는 0부터 시작

					// jQuery eq() function 사용
					$('#slctColors option').eq(4).prop('selected', true);	// index는 0부터 시작

					$('#slctColors').trigger('change');	// change event를 발생시킨다.
				});


				/* ==== # 개수 확인 ==== */
				/* 전체 option 개수 */
				$('#btnTotalNumber').click(function() {
					var num = $('#slctColors option').length;
					$('#output').text("전체 option 개수 : " + num);
				});

				/* 전체 Selected option 개수 */
				$('#btnSelectedNumber').click(function() {
					var num = $('#slctColors option:selected').length;
					$('#output').text("전체 Selected option 개수 : " + num);
				});

				/* 전체 Selected option 개수 */
				$('#btnDeselectedNumber').click(function() {
					var num = $('#slctColors option:not(:selected)').length;
					$('#output').text("전체 Deselected option 개수 : " + num);
				});


				/* ==== # Select Box Disabled ==== */
				/* Select 여부 확인 */
				$('#btnSelectCheckDisabled').click(function() {
					var b = $('#slctColors').prop('disabled');		// jQuery 1.6 이상 (jQuery 1.6 미만에는 prop()가 없음, checked, selected, disabled는 꼭 prop()를 써야함)
					// var b = $('#slctColors').attr('disabled');	// jQuery 1.6 미만 (jQuery 1.6 이상에서는 checked, undefined로 return됨)
					// var b = $('#slctColors').is('disabled');
					$('#output').text("Select 여부 확인 : " + b);
				});

				/* Select Disabled 설정 */
				$('#btnSelectChangeDisabled').click(function() {
					$('#slctColors').prop('disabled', true);
				});

				/* Select Disabled 해제 */
				$('#btnSelectChangeUndisabled').click(function() {
					$('#slctColors').prop('disabled', false);
				});

				/* Select Disabled 반전 */
				$('#btnSelectToggleDisabled').click(function() {
					$('#slctColors').prop('disabled', !$('#slctColors').prop('disabled'));
				});


				/* ==== # Select Box Disabled ==== */
				/* Red Disabled 여부 확인 */
				$('#btnOptionRedCheckDisabled').click(function() {
					var b = false;
					// value로 찾기
					b = $('#slctColors option[value="#ff0000"]').prop('disabled');

					// value는 모르고 text만 알때
					// $('#slctColors option').each(function() {
					// 	if($(this).text() == 'Red')
					// 		b = $(this).prop('disabled');
					// });

					$('#output').text("Red Disabled 여부 확인 : " + b);
				});

				/* Red Disabled 설정 */
				$('#btnOptionRedChangeDisabled').click(function() {
					$('#slctColors option[value="#ff0000"]').prop('disabled', true);
				});

				/* Red Disabled 해제 */
				$('#btnOptionRedChangeUndisabled').click(function() {
					$('#slctColors option[value="#ff0000"]').prop('disabled', false);
				});

				/* Red Disabled 반전 */
				$('#btnOptionRedToggleDisabled').click(function() {
					var $optionRed = $('#slctColors option[value="#ff0000"]');
					$optionRed.prop('disabled', !$optionRed.prop('disabled'));
				});

				/* 전체 Option Disabled 설정 */
				$('#btnOptionAllChangeDisabled').click(function() {
					$('#slctColors option').each(function() {
						$(this).prop('disabled', true);
					});
				});

				/* 전체 Option Disabled 해제 */
				$('#btnOptionAllChangeUndisabled').click(function() {
					$('#slctColors option').each(function() {
						$(this).prop('disabled', false);
					});
				});

				/* 전체 Option Disabled 반전 */
				$('#btnOptionAllToggleDisabled').click(function() {
					$('#slctColors option').each(function() {
						$(this).prop('disabled', !$(this).prop('disabled'));
					});
				});



				/* initial */
				// optgroup color 설정
				$('#slctColors optgroup').each(function(){
					$(this).css('color', $(this).children('option:nth-child(2)').val());
				});
				// option color 설정
				$('#slctColors option').each(function(){
					$(this).css('color', $(this).val());
				});
				// 초기 HTML에 설정된 상태를 확인한다.
				$('#slctColors').trigger('change');	// change event를 발생시킨다.
			});
		</script>

		<style type="text/css">
			div{margin-bottom:20px;}
			span{display:block;font-weight:bold;}
			button{margin:2px;}
			p[id='output']{min-height:24px;border:1px solid gray;border-radius:6px;padding:10px;font-weight:bold;}
			select{font-size:24px;font-weight:bold;}
		</style>
	</head>
	<body>
		<div>
			<select id="slctColors" name="slctColors">
				<optgroup label="- Red Colors">
					<option value="#cd5c5c" selected>Indian-Red</option>
					<option value="#ff0000" disabled>Red</option>
					<option value="#8b0000">Dark-Red</option>
				</optgroup>
				<optgroup label="- Green Colors">
					<option value="#90ee90">Light-Green</option>
					<option value="#008000">Green</option>
					<option value="#006400">Dark-Green</option>
				</optgroup>
				<optgroup label="- Blue Colors">
					<option value="#add8e6">Light-Blue</option>
					<option value="#0000ff">Blue</option>
					<option value="#00008b">Dark-Blue</option>
				</optgroup>
				<option value="#808080">Gray</option>
				<option value="#000000">Black</option>
			</select>
		</div>
		<p id="output">버튼을 눌러 보세요.</p>
		<div>
			<span># Select Change Event : </span>
			<span style="color:blue;">Source Code를 확인하세요. (검색 : .change)</span>
		</div>
		<div>
			<span># Value 알아내기 : </span>
			<button type="button" id="btnSelectedValue">Selected Value</button>
			<button type="button" id="btnDeselectedValues">Deselected Values</button>
		</div>
		<div>
			<span># Value 바꾸기 : </span>
			<button type="button" id="btnChangeValue">Blue로 바꾸기</button>
			<button type="button" id="btnChange5index">5번째(Green)로 바꾸기</button>
		</div>
		<div>
			<span># 개수 확인 : </span>
			<button type="button" id="btnTotalNumber">전체 option 개수</button>
			<button type="button" id="btnSelectedNumber">전체 Selected option 개수</button>
			<button type="button" id="btnDeselectedNumber">전체 Deselected option 개수</button>
		</div>
		<div>
			<span># Select Box Disabled : </span>
			<button type="button" id="btnSelectCheckDisabled">Select 여부 확인</button>
			<button type="button" id="btnSelectChangeDisabled">Select Disabled 설정</button>
			<button type="button" id="btnSelectChangeUndisabled">Select Disabled 해제</button>
			<button type="button" id="btnSelectToggleDisabled">Select Disabled 반전</button>
		</div>
		<div>
			<span># Option Disabled : </span>
			<button type="button" id="btnOptionRedCheckDisabled">Red Disabled 여부 확인</button>
			<button type="button" id="btnOptionRedChangeDisabled">Red Disabled 설정</button>
			<button type="button" id="btnOptionRedChangeUndisabled">Red Disabled 해제</button>
			<button type="button" id="btnOptionRedToggleDisabled">Red Disabled 반전</button>
			<button type="button" id="btnOptionAllChangeDisabled">전체 Option Disabled 설정</button>
			<button type="button" id="btnOptionAllChangeUndisabled">전체 Option Disabled 해제</button>
			<button type="button" id="btnOptionAllToggleDisabled">전체 Option Disabled 반전</button>
		</div>

		<div style='border-width:1px 0;border-style:solid;margin:30px 0;text-align:center;'>
			<p><a href='https://loomio.kr' target='_blank' style='text-decoration:none;'>루미오 : Loomio - https://loomio.kr</a></p>
			<p><a href='https://loomio.kr/29' target='_blank' style='text-decoration:none;'>루미오 : 제이쿼리(jQuery) Select(셀렉트 박스) 사용법 정리</a></p>
		</div>
	</body>
</html>
→ 코드 확인 및 테스트

 

감사합니다.

- 루미오 . LOOMIO -

 

저작자표시 비영리 변경금지

'프로그래밍 > jQuery' 카테고리의 다른 글

제이쿼리(jQuery) Radio(라디오 버튼) 사용법 정리  (2) 2018.12.16
제이쿼리(jQuery) Checkbox 사용법 정리  (0) 2018.12.16

'프로그래밍/jQuery' Related Articles

티스토리툴바