본문 바로가기

WEB/JavaScript

[자바스크립트] 텍스트 기준 특정 Select Option 선택하기

 

보통은 value를 기준으로 특정 옵션에 selected를 부여하지만 옵션의 텍스트를 기준으로 선택 속성을 부여해야 한다면 선택자 contains를 사용해서 구현할 수 있다.

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page session="false" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Test</title>
</head>
<body>
    <div>
        <select id="doolySelect" title="클릭하여 선택해주세요.">
            <option value="dooly">둘리</option>
            <option value="douner">도우너</option>
            <option value="tochi">또치</option>
        </select>
    </div>
</body>

<script src="<c:url value="/resources/js/jquery-2.1.4.min.js"/>"></script>
<script type="text/javascript">
jQuery(function($) {
    var targetText = "도우너";    //douner가 아닌 텍스트 도우너로 찾겠다.
    var targetVal = $('#doolySelect option:contains(' + targetText + ')').val();    //text로 옵션을 찾고 해당 value를 구한다.
    $('#doolySelect').val(targetVal);   //도우너가 기본 선택된다.
});
</script>

</html>