코린이의 기록

[jquery] 동적으로 select box selected option 주기 본문

javascript,HTML,CSS

[jquery] 동적으로 select box selected option 주기

코린이예요 2019. 3. 7. 12:02
반응형

Javascript에서 select box 사용시 동적으로 현재 modelAttribute가 가진 value가 selected 되도록 구현하고 싶을때가 있다.


Example)

forEach로 sw version list를 가져왔는데 이때 update나 view 기능을 구현할때 현재 version을 먼저 selected 되도록 구현해야 했다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
 <spring:bind path="swVersionId">
                        <div class="control-group ${status.error ? 'error' : ''}">
                        <label class="control-label" for="id">S/W <font class="required">*</font></label>
                            <div class="controls">
                                <form:select id="currentSwVersion" path="swVersionId" cssClass="input-large">
                                            <c:forEach items="${swVersions}" var="swVersion">
                                                <form:option value="${swVersion.id}" label="${swVersion.version}" />
                                            </c:forEach>
                                </form:select>
                                <c:if test="${status.error}"><span class="help-inline">${status.errorMessage}</span></c:if>
                        </div>
                        </div>
</spring:bind> 
cs


How to? 

1
2
3
4
5
6
7
//remove selected one
$('option:selected', 'select[name="options"]').removeAttr('selected');
//Using the value
$('select[name="options"]').find('option[value="3"]').attr("selected",true);
//Using the text
$('select[name="options"]').find('option:contains("Blue")').attr("selected",true);
 
cs

line 4 : select box이름이 "options"인 녀석의 value가 3인 항목이 selected 되도록 설정

line 6 : select box이름이 "options"인 녀석에 포함된 text가 "Blue"인 항목이 selected 되도록 설정



위 내용을 참고하여 반영한 부분


1
2
3
$(document).ready(function() {
            $('select[id="currentSwVersion"]').find('option:contains("${currentSwVersion}")').attr("selected",true);
        });
cs

select box ID가 "currentSwVersion"인 녀석의 option중 "currentSwVersion"객체 값을 가진 항목을 selected 되도록 설정



Reference : https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

반응형
저작자표시 비영리 동일조건

'javascript,HTML,CSS' 카테고리의 다른 글

[ES6] 문자열과 이스케이프  (0) 2019.06.13
[ES6] Literal(리터럴), Variable(변수), Constant(상수) 데이터 타입  (0) 2019.06.12
[javascript] getOutputStream() has already been called for this response  (0) 2019.02.22
[Jquery] multiselect.js를 이용한 Multi Select Box 구현하기  (0) 2019.02.20
[HTML/JS/CSS] HTML + CSS + JS를 이용한 동적 테이블 페이징 구현  (1) 2018.12.14
'javascript,HTML,CSS' Related Articles more
Comments