how to change select box value in jquery or javascript

1787 views javascript
4

i'm making a search function in notice board by 3 select options bTitle, bContent and bName.

the problem is when i go to next page, it keep shows bTitle's next page. the first page is sorts well with each select value.

when i change the page it automatically shows option of bTitle first. because bTitle is the first value. what i want is when i change the value of i want to keep that value

    <form action="controller.jspx?cmd=board" method="post" name="search">
                <select name="keyField" id=keyField>
                    <option value="bTitle">Title</option>
                    <option value="bContent">Contents</option>
                    <option value="bName">writer</option>
                </select>
                <input type="text" name="keyWord" id="keyWord" value="${keyWord}"  >
                <input type="button" value="search" onclick="searchCheck(form)">

                </form>
            </td>
        </tr>


        <tr>
            <td colspan="5" ><button onclick="writeClick();">write</button> </td>
        </tr>
    </table>
<%--    <%=PageAction.pageNumber() %>
     --%>
    <div class="toolbar-bottom">
  <div class="toolbar mt-lg">
    <div class="sorter">
      <ul class="pagination">
        <li><a href="javascript:PageMove(${paging.firstPageNo})">????</a></li>
        <li><a href="javascript:PageMove(${paging.prevPageNo})">???</a></li>
              <c:forEach var="i" begin="${paging.startPageNo}" end="${paging.endPageNo}" step="1">
                  <c:choose>
                      <c:when test="${i eq paging.pageNo}">
                <li class="active"><a href="javascript:PageMove(${i},${keyWord},${keyField})">${i}</a></li>
                <a href="controller.jspx?cmd=board&page=1">
                </a>
                      </c:when>
                      <c:otherwise>
                        <li><a href="javascript:PageMove(${i})">${i}</a></li>
                      </c:otherwise>
                  </c:choose>
              </c:forEach>
        <li><a href="javascript:PageMove(${paging.nextPageNo})">??</a></li>
        <li><a href="javascript:PageMove(${paging.finalPageNo})">???</a></li>
      </ul>
    </div>
  </div>
</div>

myScript.js

function searchCheck(frm) {
    // ??
    if (frm.keyWord.value == "") {
        alert("?? ??? ?????.");
        frm.keyWord.focus();
        return;
    }
    window.location.href = "controller.jspx?cmd=board&keyWord="+$('#keyWord').val()+"&keyField="+$('#keyField').val();

}

$('#keyField').change(function(){
      $(this).attr("selected","selected");
})

function PageMove(page) {
     var keyWord = $('#keyWord').val();
     var keyField = $('#keyField').val();

    if ($('#keyWord').val()) {

        window.location.href = "controller.jspx?cmd=board&page="+page+"&keyWord="+$('#keyWord').val()+"&keyField="+$('#keyField').val();

    }
    window.location.href = "controller.jspx?cmd=board&page="+page+"&keyWord="+$('#keyWord').val()+"&keyField="+$('#keyField').val();


}

answered question

1 Answer

6

From what I can understand from the question, You want to keep the selected value showing, when the user navigates back to the first page. Generally, as a you navigate from the first page, the state(data/changes made) is destroyed.

For this, you can use localStorage - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage. It saves the data in the user's browser and persists over page reloads and navigation to other pages. You can save the selected value for the selected page as key value pair, and when you navigate back, you can read it and set the value of the select tag.

You can use cookies instead, in case you want to set some expiration time, after which the data gets deleted automatically by the browser.

posted this

Have an answer?

JD

Please login first before posting an answer.