반응형
JQuery Select 처리 샘플 코드입니다.
|
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="btn_a">Selected</button>
<button id="btn_b">Chooose</button>
<button id="btn_c">Count</button>
<button id="btn_d">Disable Select</button>
<button id="btn_e">Disable optoin</button>
<button id="btn_f">Binding</button>
<hr/>
<label for="cars">Choose:</label>
<select id="cars" name="cars">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Fiat</option>
<option value="4">Audi</option>
</select>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
// jQuery methods go here...
$("#btn_a").click(function(){
console.log(selectedVal("cars"));
console.log(selectedText("cars"));
console.log(selectedIndex("cars"));
});
$("#btn_b").click(function(){
Chooose("cars", 2);
//ChoooseIndex("cars", 3);
});
$("#btn_c").click(function(){
selectLength("cars");
});
$("#btn_d").click(function(){
disableSelect("cars");
});
$("#btn_e").click(function(){
disableOption("cars", 3);
});
$("#btn_f").click(function(){
//binding_combo("cars", items);
binding_combo_list("cars", itemlist);
});
$("#cars").change(function(){
const item = this.options[this.selectedIndex]; // <option value="2">Saab</option>
console.log(item.text);
console.log(item.value);
console.log('Selected item: ' + this.options[this.selectedIndex].value);
});
});
// binding select
function binding_combo(id, jsonObj){
const select = $("#" + id);
$(select).empty();
for(const i in jsonObj){
$(select).append("<option value='" + i + "'>" + jsonObj[i] + "</option>");
}
}
// binding select
function binding_combo_list(id, jsonList){
const select = $("#" + id);
$(select).empty();
$.each(jsonList, function(index, value){
$(select).append("<option value='" + value.id + "'>" + value.value + "</option>");
});
}
// 선택된 값 반환
function selectedVal(id){
let selected = $("#"+id + " option:selected");
let val = $(selected).val();
return val;
}
// 선택된 텍스트 반환
function selectedText(id){
let selected = $("#"+id + " option:selected");
let val = $(selected).text();
return val;
}
// 선택된 인덱스 반환
function selectedIndex(id) {
let selected = $("#"+id + " option:selected");
let idx = $("#"+id + " option").index($(selected));
return idx;
}
// 값으로 select 하기
function Chooose(id, value){
// 아래 두 줄은 동일한 결과를 나타냄
$("#"+id).val(value);
// or
$("#"+id).val(value).prop("selected", true);
}
// 인덱스로 select 하기
function ChoooseIndex(id, idx){
// 아래 두 줄은 동일한 결과를 나타냄
$("#" + id + " option:eq(" + idx + ")").attr("selected", "selected");
// or
$("#" + id + " option:eq(" + idx + ")").prop("selected", true);
}
// 개수
function selectLength(id){
let total = $("#" + id + " option").length;
let selectedCount = $("#" + id + " option:selected").length;
let notSelectedCount = $("#" + id + " option:not(:selected)").length;
console.log("total = " + total);
console.log("selected = " + selectedCount);
console.log("not selected = " + notSelectedCount);
}
// 비활성화 처리
function disableSelect(id){
$("#" + id).prop("disabled", true);
}
// option 변경 불가처리(인자로 전달된 값이 선택되고 활성화 차단)
function disableOption(id, value){
$("#"+id).val(value).prop("disabled", true);
}
// Sample Data
let items = {
key_a:"value_a",
key_b:"value_b",
key_c:"value_c",
key_d:"value_d",
key_e:"value_e",
}
let itemlist = [
{ id:"key_a", value:"value_a" },
{ id:"key_b", value:"value_b" },
{ id:"key_c", value:"value_c" }
];
</script>
</html>
|
cs |
반응형
'IT > WEB' 카테고리의 다른 글
| JQuery DateTimePicker (xdsoft 1.3.6) (0) | 2023.01.15 |
|---|---|
| Javascript JSON 데이터 (0) | 2023.01.14 |
| Javascript 객체 (0) | 2023.01.13 |
댓글