-
jquery select box 팁Programming/javascript 2013. 12. 1. 14:30
1.셀렉트박스 name 으로 옵션값 가져오기
<body>
<select name="selname1" id="sel1">
<option value="">선택</option>
<option value="사과">사과</option>
<option value="배">배</option>
<option value="딸기">딸기</option>
</select>
<br/>
<input type="button" name="btn" id="btn1" value="Click">
</body>
<script>
$(document).ready(function() {
$('#btn1').click(function() {
alert($('select[name=selname1]').val());
});
});
</script>
2.셀렉트박스 ID로 선택된 옵션값 가져오기
<body>
<select name="selname2" id="sel2">
<option value="">선택</option>
<option value="사과">사과</option>
<option value="배">배</option>
<option value="딸기">딸기</option>
</select>
<br/>
<input type="button" name="btn" id="btn2" value="Click">
</body>
<script>
$(document).ready(function() {
$('#btn2').click(function() {
alert($('#sel2 option:selected').val());
});
});
</script>
3.셀렉트박스 선택된 위치 알아내기
<body>
<select name="selname3" id="sel3">
<option value="">선택</option>
<option value="사과">사과</option>
<option value="배">배</option>
<option value="딸기">딸기</option>
</select>
<br/>
<input type="button" name="btn" id="btn3" value="Click">
</body>
<script>
$(document).ready(function() {
$('#btn3').click(function() {
var index = $("#sel3 option").index($("#sel3 option:selected"));
alert(index + '번째 위치');
});
});
</script>
4.셀렉트박스 옵션값으로 selected 하기
<body>
<select name="selname4" id="sel4">
<option value="">선택</option>
<option value="사과">사과</option>
<option value="배">배</option>
<option value="딸기">딸기</option>
</select>
<br/>
<input type="button" name="btn" id="btn4" value="Click">
</body>
<script>
$(document).ready(function() {
$('#btn4').click(function() {
$('#sel4').val('딸기');
});
});
</script>
5.셀렉트박스 옵션값 추가하기
<body>
<select name="selname5" id="sel5">
<option value="">선택</option>
<option value="사과">사과</option>
<option value="배">배</option>
<option value="딸기">딸기</option>
</select>
<br/>
<input type="button" name="btn" id="btn5" value="Click">
</body>
<script>
$(document).ready(function() {
$('#btn5').click(function() {
$('#sel5').append('<option value="귤">귤</option>');
});
});
</script>
6.셀렉트박스 변경시에 이벤트 사용하기
<body>
<select name="selname6" id="sel6">
<option value="">선택</option>
<option value="사과">사과</option>
<option value="배">배</option>
<option value="딸기">딸기</option>
</select>
</body>
<script>
$(document).ready(function() {
$('#sel6').change(function() {
alert($(this).val());
alert($(this).children('option:selected').text());
});
});
</script>
'Programming > javascript' 카테고리의 다른 글
javascript 변수 (0) 2020.06.01 jQuery 에서 json 데이타를 읽어오는 방법 (1) 2013.12.11 jquery checkbox 팁 (0) 2013.12.01 자바스크립트 객체를 생성하는 5가지 방법 (0) 2013.08.13 자바스크립트 함수 (0) 2013.07.29