front/JS

[JQuery] selectBox 를 div로 바꿀 때

배고파요 2022. 1. 19. 10:33
728x90

 

selectbox의 옵션 값들을 어떻게 넣을 까 생각하다가.

JQuery 를 쓰는 게 제일 간단해보여서 JQuery로 만들었다.

 

 

 

 

옵션을 클릭할 때마다, 앞에 만들어 놓은, <input> 에 값이 들어 갈 수 있게 했다.

그래서 form을 submit 해서, 

클릭할 때 마다, form 에 input 값을 넣어서 넘어갈 수 있게 했음.

그 과정에서, JQuery 의

$('#form이름').submit(); 이 실행되지 않는 오류!!.

그래서 한참을 생각해보다가, 

<form> 안에 있는 <input> 의 name 이 "submit" 이라는 것을 확인!!.

 

처음 input name = "submit" 으로 해놨던 게 문제였다.

 

그래서 name 을 바꾸고, 클릭해보니까, 동작했다.

 

 

 

아주 허무하게.. 바로 되버렸다.. ㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

$(document).ready(function(){
		
			/* 검색어 하이라이트 기능  */
			var sk = $('#sk').val();
			$( "tbody>tr>td>a:contains('" + sk + "')" ).each(function(){
				var regex = new RegExp(sk, 'gi');
				$(this).html( $(this).text().replace(regex ,"<span>"+ sk +"</span>") );
			});
			/* //검색어 하이라이트 기능  */ 
			

			
			
			/* 검색 결과 옵션 */
			$( '#select_type' ).children().click(function(){
				$(this).siblings().removeClass('on');
				
				$(this).addClass('on');
				
				var st = $(this).data('st');
				
				$('input[name="st"]').val(st); 
				
				/* 
				var $subTotalSearchForm = $('#subTotalSearchForm'); 
				$subTotalSearchForm.attr('method', 'post');
				$subTotalSearchForm.attr('action', '/kor/search.do?menuIdx=650');
				$subTotalSearchForm.submit(); 
				*/
				
				$('#subTotalSearchForm').submit();
			
			});
			
			/* 
			$( "#submit_btn" ).click(function(){
				alert("submit_button 클릭");
				$('#subTotalSearchForm').submit();
			});
			*/
			
			/* //검색 결과 옵션 */
			
		
			
});

 

 

 

<form name="subTotalSearchForm"  id="subTotalSearchForm" method="post" action="/kor/search.do?menuIdx=${currMenuCd }" onsubmit="return $.sub_search();">
    <fieldset>
        <div class="search_area">
            <label for="text_search" class="hide">검색어를 입력해주세요</label>
            <input name="sk" id="sk" value="${searchVo.sk}" placeholder="검색어를 입력해주세요" type="text" class="text_search" title="검색어를 입력해주세요" />

            <label for="btn_search" class="hide">검색버튼</label>
           <input name="submit_btn" value="검색" type="submit" class="btn_search layout_bg btn_bace" title="검색버튼" />
            <%-- 
            	 input 의 name 을 submit 으로 했던 게 문제였음. 
            	input name="submit" value="검색" type="submit" class="btn_search layout_bg btn_bace" title="검색버튼" 
            --%>
        </div>
    </fieldset>

    <h4>"<span class="cr_blue">${searchVo.sk}</span>"에 관한 검색결과 <span class="cr_blue" id="search_cnt"> ${fn:length(searchVo.searchListOfBoard) + fn:length(searchVo.searchListOfContent)}</span>건입니다.</h4>

    <div class="search_on_box">
        <!-- 검색설정 -->
        <div class="left">
            <div class="clear" id="select_type">
                <%-- <select name="st" id="st" title="검색 분류 선택">
                    <option value="">전체</option>
                    <option value="1" ${searchVo.st eq '1' ? 'selected':''}>콘텐츠</option>
                    <option value="2" ${searchVo.st eq '2' ? 'selected':''}>게시판</option>
                </select> --%>

                <input type="hidden" name="st" id="st" value="">
                <a data-st="" ${searchVo.st eq '' ? 'class=\"on\"' : ''} title="정렬 전체 선택">전체</a>
                <a data-st="1" ${searchVo.st eq '1' ? 'class=\"on\"' : ''} title="정렬 콘텐츠 선택">콘텐츠</a>
                <a data-st="2" ${searchVo.st eq '2' ? 'class=\"on\"' : ''} title="정렬 게시판 선택">게시판</a>
                <a href="/kor/search.do" id="click_reset" data-st="3" class="btn_bace btn_blue btn_bace_large" title="검색설정 전체초기화 선택"><span class="reset"></span>전체초기화</a>
            </div>
        </div>
        <!-- //검색설정 -->
    </div>

</form>

 

 

728x90