select box 동적으로 생성,삭제,선택 하기!
2021. 1. 21. 15:47ㆍ개발하는중/javascript or jquery
728x90
반응형
체크박스 라디오버튼 한 후 셀렉트도 동적으로 해봄니다 생각보다 동적으로 데이터 받아서 처리할일이 좀있어서 테스트 해봤습니다.
간단하게 value와 text를 숫자로 하여 쉽게했지만 응용하여 입력받아 원하는 값을 select 의 option으로 넣어 줄수 있습니다.!
셀렉트박스 많이 쓰는 유형이 1번 셀렉트 선택하면 2번셀렉트박스가 1번벨류 값에 관련된 옵션으로 변경되는 방식이 진짜 많은데 다음에 그걸 테스트 해보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<body>
<p>셀렉트박스 동적 제어</p>
<input type="button" id="btn0" name="btn0" value="셀렉트박스 아이템 갯수">
<input type="button" id="btn1" name="btn1" value="추가">
<input type="button" id="btn2" name="btn2" value="마지막 셀렉트박스 삭제">
<input type="button" id="btn3" name="btn3" value="전체삭제">
<input type="button" id="btn4" name="btn4" value="박스선택입력">
<input type="button" id="btn5" name="btn5" value="현재선택된셀렉트value/text">
<div id="div_chk">
<select id="select_id" style="width: 10%;">
</select>
</div>
<script type="text/javascript">
$(document).ready(function(){
// 추가
var i = 0;
$("#btn0").on("click", function() {
// length로도 몇개인지 알수 있지만 size도 됩니다.
// i = $("#div_chk > #select_id > option").length;
i = $("#div_chk > #select_id > option").size();
console.log(i);
alert("총 개수 == "+i);
});
$("#btn1").on("click", function() {
i = $("#div_chk > #select_id > option").length;
console.log(i);
$("#select_id").append("<option value='"+i+"'>"+i+"</option>");
});
// 마지막 순번 삭제
$("#btn2").on("click", function() {
i = $("#div_chk > #select_id > option").length - 1;
console.log(i);
$("#div_chk > #select_id > option").eq(i).remove();
});
// 전체삭제
$("#btn3").on("click", function() {
$("#select_id").empty();
});
// 박스선택입력
$("#btn4").on("click", function() {
i = $("#div_chk > #select_id > option").length - 1;
console.log(i);
if(i < 0){
alert("셀렉트박스 옵션이 존재 하지 않습니다.");
return;
}
let num = prompt("셀렉트 하고 싶은 셀렉트박스 숫자 입력!", "숫자만 입력해주세요!");
var regexp = /^[0-9]*$/
var temp = num;
if(num > i){
alert("셀렉트박스가 옵션이 존재 하지 않습니다.");
return;
}
if(!regexp.test(temp)){
alert("숫자만 입력하세요");
return;
}
// 위에것도 선택되는데...밑에걸로 쓰는지는 모르겠습니다..
// $("#select_id").val(num);
$("#select_id").val(num).prop("selected",true);
});
// 현재선택된셀렉트value/text
$("#btn5").on("click", function() {
var t = $("#select_id > option:selected").text();
var v = $("#select_id > option:selected").val();
alert("선택되어있는 셀렉트의 value == " + v + "\ntext == " + t);
});
});
</script>
</body>
|
cs |
728x90
'개발하는중 > javascript or jquery' 카테고리의 다른 글
| 셀렉트박스(selectbox) 동적 option 넣기! (1) | 2021.01.22 |
|---|---|
| radio 동적으로 생성,삭제,체크 하기! (0) | 2021.01.21 |
| checkbox 동적으로 생성,삭제,체크 하기! (0) | 2021.01.21 |
| javascript 현재날짜 구하기 (0) | 2021.01.13 |
| 동적 onclick 이벤트 (0) | 2020.12.16 |