반응형
안녕하세요. 오늘은 셀렉트 옵션값을 제이쿼리와 AJAX 비동기 통신을 이용하여 가져오는 방법을 정리해보겠습니다.
아래는 구현 화면입니다.
AJAX를 통해 간단히 만들 수 있지만 제이쿼리 문법을 조금은 알아야합니다.
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<tr>
<th class="active" style="text-align:right"><label class="control-label" for=""><span class="ftcdanger">*</span>관람 선택</label></th>
<td>
<select name="resv_program_type" id="resv_program_type" class="form-control" style="width:500px" onchange="typeFn();"/>
<option value="">--선택-- </option>
<option value="1">전시관</option>
<option value="2">프로그램</option>
</select>
</td>
</tr>
<tr id="programTr" style="display:none;">
<th class="active" style="text-align:right"><label class="control-label" for=""><span class="ftcdanger">*</span>프로그램 선택</label></th>
<td>
<select name="resv_program" id="resv_program" class="form-control" style="width:500px"/>
</select>
</td>
</tr>
|
cs |
여기서는 보통의 select태그의 형태입니다.
특이점은 이름값 resv_program_type인 select태그 (전시관/프로그램 선택 태그) 에
onchange 함수를 넣어서 클릭할때마다 함수가 작동할 수 있도록 합니다.
그리고 프로그램 선택 태그 tr에 display none처리하여 보이지 않도록 합니다.
프로그램을 선택할 때만 보이도록 설정해 놓는거죠!
Controller
|
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
|
@RequestMapping(value = "/gnb03/lnb02/select_ajax.do")
@ResponseBody
public String select_ajax(
@RequestBody String filterJSON,
HttpServletResponse response,
ModelMap model ) throws Exception {
JSONObject obj = new JSONObject();
List<tbl_programVO> programList = null;
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
try{
ObjectMapper mapper = new ObjectMapper();
tbl_programVO searchVO = (tbl_programVO)mapper.readValue(filterJSON,new TypeReference<tbl_programVO>(){ });
programList = programService.getSelectList(searchVO);
obj.put("programList", programList);
}catch(Exception e){
System.out.println(e.toString());
obj.put("res", "error");
}
out.print(obj);
return null;
}
|
cs |
보통의 ajax 서버 구성입니다!
Jquery
|
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
|
function typeFn() {
$("#resv_program").attr("disabled",true); if($("select[name=resv_program_type] > option:selected").val() == "2"){
$("#programTr").show();
$("#resv_program > option").remove();
$("#resv_program").attr("disabled",true);
$("#resv_program").append("<option value=\"\">--선택--</option>");
var type = $("#resv_program_type").val();
var submitObj = new Object();
submitObj.prgm_type= type;
$.ajax({
url: path+"/gnb03/lnb02/select_ajax.do",
type: "POST",
contentType: "application/json;charset=UTF-8",
data:JSON.stringify(submitObj),
dataType : "json",
progress: true
})
.done(function(data) {
$('#resv_program').children('option:not(:first)').remove(); var laborOption = "";
for(var k in data.programList){
var obj = data.programList[k];
var prgm_name = obj.prgm_name;
var prgm_idx = obj.prgm_idx;
laborOption = "<option value='" + prgm_idx + "'>" + prgm_name + "</option>";
$("#resv_program").append(laborOption);
}
$("#resv_program").attr("disabled",false); })
.fail(function(e) {
alert("FAIL - "+e);
})
.always(function() {
$("#resv_program").attr("disabled",false);
});
}
}
|
cs |
|
|
|
|
|
|
|
만약에 프로그램을 선택했을 경우,
프로그램 태그를 show를 통해 보이도록 합니다.
그리고 다시 선택할때 중복으로 추가되지 않도록 option을 remove해줍니다.
그리고 ajax를 실행하는 동안 선택을 누르지 못하도록 disabled값을 true로 설정해줍니다.
append를 통해 선택을 추가해주고,
타입값을 담아서 서버에 보내줍니다.
서버에서 담아온 데이터를 for문을 돌려서
리스트를 오브젝트에 담은 다음,
변수에 다시 담아 laborOption에 태그값을 넣어줍니다.
그리고 프로그램 셀렉트 태그에 append하여 추가해주면 되는거죠!
마지막 always 부분에서 선택할 수 있도록 disabled false를 해주면 완료됩니다!
반응형
'JAVASCRIPT & JQUERY' 카테고리의 다른 글
| [Jquery] input/div/모든태그 focus 사용방법!! (영상 有) (0) | 2021.11.18 |
|---|---|
| [Jquery] input 실시간 감지 기능 (영상 有) (0) | 2021.11.17 |
| [Jquery] 유형별 유효성 검사&활용 사용방법!! (0) | 2021.11.01 |
| [HTML&JQUERY&Java] 태그 추가 삭제 및 다중insert 기능!! (영상 有) (0) | 2021.10.20 |
| [Jquery] 입력 그룹 값 계산 및 테이블 생성 방법!! (영상 有) (0) | 2021.10.12 |
댓글