2009/02/12 10:44
CodeIN/Web
혼자 해결해보려고 했지만 아직 개념이 부족한 상태라 또 카페에 질문한 후에 답변을 받고 대략 어떻게 동작이 되는지 이해를 한 후에 정리를 해본다.
소스를 간단히 정리를 하면은 select box와 input text를 for문을 이용해서 각 10개 생성한후
select box에서 어떤 값을 선택하면 이 값을 input text에 보여주는 것이다.
위 소스가 작동한다는 보장은 하지 않는다 나는 개념을 정리하기 위한 것이기 때문이다.
for문을 이용해서 select box와 input text가 10개씩 생성이 되었고, 10개의 select box는 "SH"라는 name을, 10개의 input text는 "TT"라는 name을 사용하고 있다.
이럴 때 getElementsByName을 이용하여 처리를 하는데
getElementsByName의 return값은 배열이라고 한다.
그렇기 때문에 document.getElementsByName("SH")라고 하면 name이 "SH" 인 것들을 배열로 return하는 것 같다.(이것은 내 생각일뿐이다 ㅎㅎ)
function setEachValues(index){
var sh = document.getElementsByName("SH")[index];
var t = document.getElementsByName("TT")[index];
t.value = sh.options[sh.selectedIndex].text;
}
for(int i=0 ; i < 10 ; i++ ){
<select name="SH" onChange="setEachValues(<%=i%>);">
<option value="1">1시</option>
<option value="2">2시</option>
<option value="3">3시</option>
</select>
<input type="text" name="TT">
}
var sh = document.getElementsByName("SH")[index];
var t = document.getElementsByName("TT")[index];
t.value = sh.options[sh.selectedIndex].text;
}
for(int i=0 ; i < 10 ; i++ ){
<select name="SH" onChange="setEachValues(<%=i%>);">
<option value="1">1시</option>
<option value="2">2시</option>
<option value="3">3시</option>
</select>
<input type="text" name="TT">
}
소스를 간단히 정리를 하면은 select box와 input text를 for문을 이용해서 각 10개 생성한후
select box에서 어떤 값을 선택하면 이 값을 input text에 보여주는 것이다.
위 소스가 작동한다는 보장은 하지 않는다 나는 개념을 정리하기 위한 것이기 때문이다.
for문을 이용해서 select box와 input text가 10개씩 생성이 되었고, 10개의 select box는 "SH"라는 name을, 10개의 input text는 "TT"라는 name을 사용하고 있다.
이럴 때 getElementsByName을 이용하여 처리를 하는데
getElementsByName의 return값은 배열이라고 한다.
그렇기 때문에 document.getElementsByName("SH")라고 하면 name이 "SH" 인 것들을 배열로 return하는 것 같다.(이것은 내 생각일뿐이다 ㅎㅎ)
'CodeIN > Web' 카테고리의 다른 글
| [javascript] table에 row 추가 - insertRow() (0) | 2009/02/13 |
|---|---|
| [html] contenteditable="false" (0) | 2009/02/12 |
| [javascript] document.getElementsByName() 사용법 (0) | 2009/02/12 |
| [html]select box에서 선택한 값 가져오기 (0) | 2009/02/11 |
| Enter입력시 자동 submit 막기 (1) | 2009/02/10 |
| [javascript]입력값의 자리수 체크 (0) | 2009/02/10 |
