HTML 리스트박스

HTML list box

HTML 리스트박스

1 예시 1

• select에 size 속성을 붙이면 리스트박스가 된다.

html

Copy

<select name='fruits' size='6'>
    <option value='' selected>-- 선택 --</option>
    <option value='apple'>사과</option>
    <option value='banana'>바나나</option>
    <option value='lemon'>레몬</option>
</select>

2 예시 2

html

Copy

<select id='fruits' name='fruits' size='6' onchange='fruits_selected()'>
	<option value='' selected>-- 선택 --</option>
	<option value='apple'>사과</option>
	<option value='banana'>바나나</option>
	<option value='lemon'>레몬</option>
</select>

<script>
function fruits_selected() {
	var obj = document.getElementById('fruits');
	var index = obj.selectedIndex;
	var value = obj.options[index].value;
	var text = obj.options[index].text;
	console.log( 'index=', index, 'value=', value, 'text=', text );
}
</script>

3 같이 보기

• jQuery UI 셀렉터블 selectable
• HTML 드랍다운 메뉴
• HTML select 태그
• 리스트박스