다중셀렉트를 이용한 메뉴

다중셀렉트를 이용한 메뉴 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

다중셀렉트를 이용한 메뉴 정보

다중셀렉트를 이용한 메뉴

첨부파일

select.php (5.2K) 158회 다운로드 2006-05-25 00:22:42

본문

<html><head><title>다중셀렉트</title><head>

<script language='javascript'>

// 부메뉴 옵션 상하 이동 함수
function ctg_move(updown){
sel=document.form1.ctg_submenu;
var maxup = 0;
var mindown = sel.options.length - 1;
var movenum = sel.selectedIndex;

var uppre = movenum - 1;
var downpre = movenum + 1;

var opt_value;
var opt_text;

var be_selected = false;
for ( i = mindown; i >= 0 ; i-- ){
if ( sel.options[i].selected == true ) be_selected = true;
}

if ( !be_selected ){

alert('이동할 분류를 선택하세요.');
return;
}

if ( updown == 'up' ){

if ( maxup > uppre ){

alert('처음입니다.');
return;
}
else {

opt_value = sel.options[movenum].value;
opt_text = sel.options[movenum].text;

opt_value_u = sel.options[uppre].value;
opt_text_u = sel.options[uppre].text;

sel.options[uppre].value = opt_value;
sel.options[uppre].text = opt_text;

sel.options[movenum].value = opt_value_u;
sel.options[movenum].text = opt_text_u;

sel.options[uppre].selected = true;
sel.selectedIndex = uppre;
}
}
else {

if ( mindown < downpre ){

alert('마지막입니다.');
return;
}
else {
opt_value = sel.options[movenum].value;
opt_text = sel.options[movenum].text;

opt_value_d = sel.options[downpre].value;
opt_text_d = sel.options[downpre].text;

sel.options[downpre].value = opt_value;
sel.options[downpre].text = opt_text;

sel.options[movenum].value = opt_value_d
sel.options[movenum].text = opt_text_d;

sel.options[downpre].selected = true;
sel.selectedIndex = downpre;
}
}
get_result()
}

// 주메뉴에서 선택되어진 옵션을 부메뉴에 옵션값을 부여하는 함수

function ctg_scopy()
{
menu=document.form1.ctg_mainmenu;
sel=document.form1.ctg_submenu;
sel_len=document.form1.ctg_submenu.length;

if (menu.selectedIndex == 0)
{alert( '분류메뉴를 선택하세요.' );menu.focus();return;}
for(var i=0;i<menu.length;i++)
{
if(menu.options[i].selected && menu.options[i].value)
{
menu.options[i].selected=false;
var be_exist = false;
for(var k=0;k<sel_len;k++)
{
if(menu.options[i].value==sel.options[k].value)
{ be_exist = true;
break;
}
}
if ( be_exist ){ alert( '이미 설정된 분류입니다.' );menu.focus();return; }
if(!be_exist)
{
sel.options[sel_len]=new Option(menu.options[i].text,menu.options[i].value);
sel_len++;
sel.size = sel.options.length + 1;
}
}
}
get_result()
}

// 주메뉴에서 가져온 부메뉴 옵션 삭제함수
function ctg_sdel()
{
buff=new Array();
sel=document.form1.ctg_submenu;
sel_len=document.form1.ctg_submenu.length;

for(var i=sel_len-1;i>=0;i--)
{
if(sel.options[i].selected && sel.options[i].value)
{

sel.options[i] = null;

}
}
get_result()
}

// 주메뉴에서 부메뉴에 값을 넘기고 그 값을 ','형식으로 보여주는 함수
function get_result()
{
rst=new Array();
sel=document.form1.ctg_submenu;
sel_len=document.form1.ctg_submenu.length;

for(var i=0;i<sel_len;i++)
{
rst[i]=sel.options[i].value;
}
rst=rst.join(',');
document.form1.ctg_result.value=rst;
}
</script>

<body>
<form name=form1>
<table width='300' cellpadding='2' cellspacing='4' border='0' style='border:1px solid #ccccee'>
<tr>
<td height='22' align='center' style='font: 9pt 굴림; border: 1px #ccccee solid' >다중셀렉트를 사용하세요.</td>
<tr>
<td>

<select name='ctg_mainmenu' style='background: #ccccff; color: #000000; font: 9pt 굴림; width:100%'>
<option value='0'>--- 다중셀렉트 분류 선택 ---</option>
<option value='1'>그누보드</option>
<option value='2'>엠파스</option>
<option value='3'>네이트</option>
<option value='4'>네이버</option>
<option value='5'>다음</option>
<option value='6'>파란</option>
</select>
</td>
</tr>
<tr>
<td>
<select name='ctg_submenu' style='background: #ffffff; color: #808080; font: 9pt 굴림; width:100%' size='2' multiple>
</select>
</td>
<td width='20'>
<input type='button' value='▲' onclick="ctg_move('up')" style='background-color: #ffffff; border: 1px #ffffff solid; font-family: 굴림; color: #ccccee; font-size: 9pt; width: 20' >
<input type='button' value='▼' onclick="ctg_move('')" style='background-color: #ffffff; border: 1px #ffffff solid; font-family: 굴림; color: #ccccee; font-size: 9pt; width: 20'>
</td>
</tr>
<tr>
<td>
<input type='text' name='ctg_result' style='width: 69%'>
<input type='button' value='적용' onclick='ctg_scopy()' style='background: #ffffff; font-size: 12px; border: solid 1px #ccccee; height: 21px'>
<input type='button' value='해제' onclick='ctg_sdel()' style='background: #ffffff; font-size: 12px; border: solid 1px #ccccee; height: 21px'>
</td>
</tr>
</table>
</form>
<body>

그누에서 한참 찾았보니 없는것 같아서요...
그냥 아주 사소한 것이지만 초보에게는 무척 필요한 소스일것 같아 올립니다.
사용방법은 그냥 통째로 갈무리해서 필요한 부분만 수정하시면 될것 같아요...