HTML5 템플릿에서 선택 값을 변경하십시오.

Question

자바 스크립트를 사용하여 HTML 선택 값을 변경할 수는 있지만 선택 항목이 HTML5 템플릿에 있으면 실패합니다.

<template id="sel_template"> 
<select id="sel"> 
    <option value="1">Cat</option> 
    <option value="2">Dog</option> 
    <option value="3">Fish</option> 
</select> 
</template> 

<div id="put_here"> 
</div> 

그리고 자바 스크립트 코드 :

var t = document.querySelector("#sel_template"); 
var val = 2;  
t.content.querySelector('#sel [value="' + val + '"]').selected = true; 
var clone = document.importNode(t.content,true); 
document.querySelector("#put_here").appendChild(clone); 

값 선택 대신 "물고기"의 "고양이"입니다

예를 들어, 여기에 HTML 코드입니다.

jsfiddle : http://jsfiddle.net/dfroger/29kmerjh/1/

문제점은 무엇입니까?

Answer 1

당신은 setAttribute를 사용해야합니다 :

t.content.querySelector('#sel [value="' + val + '"]').setAttribute('selected', 'selected'); 

Fiddle