다중선택이 가능한 셀렉트박스를 양쪽에 두고...
좌측 셀렉트박스에서 원하는 값을 선택하여 우측 셀렉트박스에 추가하고
그 결과를 submit할 수 있도록 저장하는 스크립트를 만들어 보았습니다...
<form name=reg>
<table>
<tr>
<td>
<select name=a size=10 style=width:100 multiple>
<OPTION value=a>A</OPTION>
<OPTION value=b>B</OPTION>
<OPTION value=c>C</OPTION>
<OPTION value=d>D</OPTION>
<OPTION value=e>E</OPTION>
<OPTION value=f>F</OPTION>
</select>
</td>
<td>
<input type=button value=' > ' onclick=gor()><br><br>
<input type=button value=' < ' onclick=gol()>
</td>
<td>
<select name=b size=10 style=width:100 multiple>
</select>
</td>
</tr>
</table>
<input type=text name=res size=30>
</form>
<script>
function gor()
{
j=document.reg.b.length;
for(var i=0;i<document.reg.a.length;i++)
{
if(document.reg.a.options[i].selected && document.reg.a.options[i].value)
{
document.reg.a.options[i].selected=false;
chk_same=0;
for(var k=0;k<document.reg.b.length;k++)
{
if(document.reg.a.options[i].value==document.reg.b.options[k].value)
{
chk_same=1;
}
}
if(!chk_same)
{
document.reg.b.options[j]=new Option(document.reg.a.options[i].text,document.reg.a.options[i].value);
j++;
}
}
}
get_result()
}
function gol()
{
buff=new Array();
j=0;
for(var i=document.reg.b.length-1;i>=0;i--)
{
if(document.reg.b.options[i].selected && document.reg.b.options[i].value)
{
document.reg.b.options[i] = null;
}
}
get_result()
}
function get_result()
{
res=new Array();
for(var i=0;i<document.reg.b.length;i++)
{
res[i]=document.reg.b.options[i].value;
}
res=res.join("|");
document.reg.res.value=res;
}
</script>
미리보기 주소입니다..
http://libphp.com/main/data/preview.php?no=3088
좌측 셀렉트박스에서 원하는 값을 선택하여 우측 셀렉트박스에 추가하고
그 결과를 submit할 수 있도록 저장하는 스크립트를 만들어 보았습니다...
<form name=reg>
<table>
<tr>
<td>
<select name=a size=10 style=width:100 multiple>
<OPTION value=a>A</OPTION>
<OPTION value=b>B</OPTION>
<OPTION value=c>C</OPTION>
<OPTION value=d>D</OPTION>
<OPTION value=e>E</OPTION>
<OPTION value=f>F</OPTION>
</select>
</td>
<td>
<input type=button value=' > ' onclick=gor()><br><br>
<input type=button value=' < ' onclick=gol()>
</td>
<td>
<select name=b size=10 style=width:100 multiple>
</select>
</td>
</tr>
</table>
<input type=text name=res size=30>
</form>
<script>
function gor()
{
j=document.reg.b.length;
for(var i=0;i<document.reg.a.length;i++)
{
if(document.reg.a.options[i].selected && document.reg.a.options[i].value)
{
document.reg.a.options[i].selected=false;
chk_same=0;
for(var k=0;k<document.reg.b.length;k++)
{
if(document.reg.a.options[i].value==document.reg.b.options[k].value)
{
chk_same=1;
}
}
if(!chk_same)
{
document.reg.b.options[j]=new Option(document.reg.a.options[i].text,document.reg.a.options[i].value);
j++;
}
}
}
get_result()
}
function gol()
{
buff=new Array();
j=0;
for(var i=document.reg.b.length-1;i>=0;i--)
{
if(document.reg.b.options[i].selected && document.reg.b.options[i].value)
{
document.reg.b.options[i] = null;
}
}
get_result()
}
function get_result()
{
res=new Array();
for(var i=0;i<document.reg.b.length;i++)
{
res[i]=document.reg.b.options[i].value;
}
res=res.join("|");
document.reg.res.value=res;
}
</script>
미리보기 주소입니다..
http://libphp.com/main/data/preview.php?no=3088
'프로그래밍 > HTML/CSS/Script' 카테고리의 다른 글
| JavaScript로 만든 간단한 계산기 (0) | 2006/07/12 |
|---|---|
| JavaScript를 이용한 간단한 레이어 보여주기/숨기기 (0) | 2006/07/12 |
| 왜 자바스크립트로 링크를 걸까? (0) | 2006/07/12 |
| [JavaScript]다중셀렉트박스간 값이동 및 결과처리 (0) | 2006/07/09 |
| [HTML] 이미지 도구모음 보이지 않게 하기 (0) | 2006/07/09 |
| [JavaScript]선택된 영역 문자열 알아내기 (0) | 2006/07/09 |
