셀렉트 콤보박스 선택값을 input 박스에 넣기 정보
셀렉트 콤보박스 선택값을 input 박스에 넣기관련링크
첨부파일
본문
제 홈페이지에서 셀렉트 콤보박스 값을 선택했을 때 그 선택 값이 옆에 있는 input 박스 속으로 자동으로 들어가게 하는 프로그램을 만들어 봤습니다. (원래는 다른 페이지에서 잘 되고 있는 코드를 원용해서 해당 id값만 변형해서 코드를 붙인 것임)
그런데 이상하게도 이 페이지에서만 선택값이 넘어가질 낳네요. 코드 어디가 문제인지를 봐 주시기 바랍니다. 모두 3 x 7 의 21개 코드가 있지만 여기서는 편의상 맨 윗줄의 3개 코드만 예시해 놓고 나머지는 생략했습니다.
myprifile_form.skin.php에서
html부분은 여기 이고요.
<tr bgcolor="#ffffff">
<td width="20%" class=m_title bgcolor="#f5f5f5">주</td>
<td>
<select name='mb_a1' id='mb_a1' style="width:45%;" onchange="mb_a1_change();">
<option value='0' selected>선택하세요</option><br><?=get_item_list()?></select>
<input name='txt_mb_a1' id='txt_mb_a1' style="width:50%;" value="<?=get_major($mb_a1)?>">
</td>
<td>
<select name='mb_b1' id='mb_b1' style="width:45%;" onchange="mb_b1_change();">
<option value='0' selected>선택하세요</option><br><?=get_func_list()?></select>
<input name='txt_mb_b1' id='txt_mb_b1' style="width:46%;" value="<?=get_major($mb_b1)?>">
</td>
<td><select name='mb_c1' id='mb_c1' style="width:45%;" onchange="mb_c1_change();">
<option value='0' selected>선택하세요</option><br><?=get_bound_list()?>/select>
<input name='txt_mb_c1' id='txt_mb_c1' style="width:46%;" value="<?=get_major($mb_c1)?>">
</td>
</tr>
..... <이하 생약>.....
함수 부분은 여기에
<script type="text/javascript">
function mb_a1_change()
{
var el = document.getElementById('mb_a1');
document.getElementById('txt_mb_a1').value = el.options[el.selectedIndex].text;
}
function mb_b1_change()
{
var el = document.getElementById('mb_b1');
document.getElementById('txt_mb_b1').value = el.options[el.selectedIndex].text;
}
function mb_c1_change()
{
var el = document.getElementById('mb_c1');
document.getElementById('txt_mb_c1').value = el.options[el.selectedIndex].text;
}
//....<이하 생략>.....
</script>
똑같은 코드가 다른데서는 잘되는게 이곳에서만 안될 땐 정말 난감합니다.
어디서부터 손을 봐야할지 답답합니다. 고수분들좀 봐주세요.
***P.S.: 해당 험페이지에서 직접 확인 할 경우의 접속 id/pw: amuna/1234 입니다.
그런데 이상하게도 이 페이지에서만 선택값이 넘어가질 낳네요. 코드 어디가 문제인지를 봐 주시기 바랍니다. 모두 3 x 7 의 21개 코드가 있지만 여기서는 편의상 맨 윗줄의 3개 코드만 예시해 놓고 나머지는 생략했습니다.
myprifile_form.skin.php에서
html부분은 여기 이고요.
<tr bgcolor="#ffffff">
<td width="20%" class=m_title bgcolor="#f5f5f5">주</td>
<td>
<select name='mb_a1' id='mb_a1' style="width:45%;" onchange="mb_a1_change();">
<option value='0' selected>선택하세요</option><br><?=get_item_list()?></select>
<input name='txt_mb_a1' id='txt_mb_a1' style="width:50%;" value="<?=get_major($mb_a1)?>">
</td>
<td>
<select name='mb_b1' id='mb_b1' style="width:45%;" onchange="mb_b1_change();">
<option value='0' selected>선택하세요</option><br><?=get_func_list()?></select>
<input name='txt_mb_b1' id='txt_mb_b1' style="width:46%;" value="<?=get_major($mb_b1)?>">
</td>
<td><select name='mb_c1' id='mb_c1' style="width:45%;" onchange="mb_c1_change();">
<option value='0' selected>선택하세요</option><br><?=get_bound_list()?>/select>
<input name='txt_mb_c1' id='txt_mb_c1' style="width:46%;" value="<?=get_major($mb_c1)?>">
</td>
</tr>
..... <이하 생약>.....
함수 부분은 여기에
<script type="text/javascript">
function mb_a1_change()
{
var el = document.getElementById('mb_a1');
document.getElementById('txt_mb_a1').value = el.options[el.selectedIndex].text;
}
function mb_b1_change()
{
var el = document.getElementById('mb_b1');
document.getElementById('txt_mb_b1').value = el.options[el.selectedIndex].text;
}
function mb_c1_change()
{
var el = document.getElementById('mb_c1');
document.getElementById('txt_mb_c1').value = el.options[el.selectedIndex].text;
}
//....<이하 생략>.....
</script>
똑같은 코드가 다른데서는 잘되는게 이곳에서만 안될 땐 정말 난감합니다.
어디서부터 손을 봐야할지 답답합니다. 고수분들좀 봐주세요.
***P.S.: 해당 험페이지에서 직접 확인 할 경우의 접속 id/pw: amuna/1234 입니다.
댓글 전체
select box마다 각각 함수를만들어 호출하는 것은 대단히 무식한 방법입니다
21개나 필요없는 함수를 만들다니 말이 됩니까?
1. 그누보드에서 사용하는 것이라면 아래처럼 모든 onchange를 동일하게 하면 됩니다
함수 부분은 필요없습니다
onchange="$(this).next().val(this.value)"
2. jquery를 사용하지않는 페이지라면 onchange를 아래처럼 만듭니다
onchange="change_value(this.value, 'a1')"
onchange="change_value(this.value, 'b1')"
함수는 하나만 만듭니다
function change_value(vv, id){
document.getElementById("txt_mb_"+id).value=vv
}
3. 2번의 경우 onchange를 아래처럼 만들어도 됩니다 함수는 필요없습니다
onchange="document.getElementById('txt_mb_a1').value=this.value"
onchange="document.getElementById('txt_mb_b1').value=this.value"
그리고 option태그 사이에 이런 쓸데없는 코드는 들어가는 것이 아닙니다
</option><br><---br
21개나 필요없는 함수를 만들다니 말이 됩니까?
1. 그누보드에서 사용하는 것이라면 아래처럼 모든 onchange를 동일하게 하면 됩니다
함수 부분은 필요없습니다
onchange="$(this).next().val(this.value)"
2. jquery를 사용하지않는 페이지라면 onchange를 아래처럼 만듭니다
onchange="change_value(this.value, 'a1')"
onchange="change_value(this.value, 'b1')"
함수는 하나만 만듭니다
function change_value(vv, id){
document.getElementById("txt_mb_"+id).value=vv
}
3. 2번의 경우 onchange를 아래처럼 만들어도 됩니다 함수는 필요없습니다
onchange="document.getElementById('txt_mb_a1').value=this.value"
onchange="document.getElementById('txt_mb_b1').value=this.value"
그리고 option태그 사이에 이런 쓸데없는 코드는 들어가는 것이 아닙니다
</option><br><---br
실제로 실행되는지는 해봐야 알겠지만 여하튼 좋은 지적에 감사드립니다.
코드가 무식한 방법에다 지저분한 것 백번 동의합니다. 원본은 다른 사람이 개발해 놓은 것에다 제가 수리하는 방식을 취하다보니 그렇게 되었습니다
option태그사이에 쓸데 없는 코드는 무엇을 말하는 것인지요.
코드가 무식한 방법에다 지저분한 것 백번 동의합니다. 원본은 다른 사람이 개발해 놓은 것에다 제가 수리하는 방식을 취하다보니 그렇게 되었습니다
option태그사이에 쓸데 없는 코드는 무엇을 말하는 것인지요.
1/2/3번 방식으로 하니까 바로 모두 되네요. 그런데 선택하면 과목명이 들어가지 않고 해당 과목명의 id 숫자가 들어가는데 과목명이 들어가게 하는 방법은요?
현재 data 저장은 id($mj_id)로 되고 화면에는 해당 id의 이름($mj_name)을 찾아 보여주는 방식으로 프로그램이 되어 있습니다.
현재 data 저장은 id($mj_id)로 되고 화면에는 해당 id의 이름($mj_name)을 찾아 보여주는 방식으로 프로그램이 되어 있습니다.