[ jQuery ] select option이 selected 선택되었을때 value값을 가져오게하는법

select option이 selected 선택되었을때 value값을 가져오게하는법

코어태그립으로 selected 속성을 부여하고 form get방식으로 submit을통해 선택된 네임파라미터를 전송하는 방법을 jQuery로 구현할수 있습니다.

<form action="/board/list" method="get">
    <select name="condition" >                            	
        <option value="title"
        <c:if test="${condition=='title'}">
        ${'selected'}</c:if>>제목</option>
        <option value="content"
        <c:if test="${condition=='content'}">
        ${'selected'}</c:if>>내용</option>
        <option value="writer"
        <c:if test="${condition=='writer'}">
        ${'selected'}</c:if>>작성자</option>
        <option value="titleContent">제목+내용</option>
    </select>
    <input name="keyword" value="${keyword}" />
    <input type="submit" value="검색" />
<form>

기본적으로 select 속성은 제목 이라는 option이 선택되었을때 제목 option의 value속성 값이 select의 name파라미터에 실려 넘어갑니다.

<select name="condition">
<option value="title"<c:if test="${condition=='title'}">${'selected'}</c:if>>제목</option>
</select>

제목이 선택된다면 condition이라는 파라미터에 title이 실려가는것입니다.


이 내용은 선택된 option을 전송하는것과는 별개인데 이 코드를보십시오

<c:if test="${condition=='title'}">${'selected'}</c:if>

c:if문의 조건은 만약 name이 condition인 select태그의 option이 현재 option태그의 title로 선택되어있다면 selected옵션을 주라는 내용입니다.
selected를 준 이유는 검색을 마치고 다시 돌아왔을 때 선택되있는 select박스의 기본옵션이 그대로 남아있게하기 위해서 해준 작업입니다.



만약 선택된값을 보내는 코드를 jQuery로 구현한다면

<select id="condition" name="condition">                            	
    <option value="title">제목</option>
    <option value="content">내용</option>
    <option value="writer">작성자</option>
    <option value="titleContent">제목+내용</option>
</select>
<input type="text" name="keyword" id="keyword" placeholder="검색어">
<input type="button" value="검색" id="searchBtn">                                       

$(searchBtn).click(function(){		
    let keyword = $(keyword).val();
    const select = $('#condition option:selected').val();
    location.href = "/board/list?keyword="+keyword+"&condition="+condition;
});

$('#condition option:selected').value()

아이디가 condition인 애의 자식중에 <option>가 selected 즉 선택된걸 찾아서 value값을 가꾸와라 이런말이 됩니다.

jQuery에는 selected속성을 따로 부여하지 않았습니다.

    location.href = "/board/list?keyword="+keyword+"&condition="+condition;

선택된 condition과 keyword를 파라미터에 담아 url로 전송해줍니다.


전체 코드 비교하기

<form action="/board/list" method="get>
    <select name="condition" >                            	
        <option value="title"
        <c:if test="${condition=='title'}">
        ${'selected'}</c:if>>제목</option>
        <option value="content"
        <c:if test="${condition=='content'}">
        ${'selected'}</c:if>>내용</option>
        <option value="writer"
        <c:if test="${condition=='writer'}">
        ${'selected'}</c:if>>작성자</option>
        <option value="titleContent">제목+내용</option>
    </select>
    <input name="keyword" value="${keyword}" />
    <input type="submit" value="검색" />
<form>

<select id="condition" name="condition">                            	
    <option value="title">제목</option>
    <option value="content">내용</option>
    <option value="writer">작성자</option>
    <option value="titleContent">제목+내용</option>
</select>
<input type="text" name="keyword" id="keyword" placeholder="검색어">
<input type="button" value="검색" id="searchBtn">                                       

$(searchBtn).click(function(){		
    let keyword = $(keyword).val();
    const select = $('#condition option:selected').val();
    location.href = "/board/list?keyword="+keyword+"&condition="+condition;
});