다중셀렉트를 이용한 메뉴
<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>
<!-- DB연동시 사용하고자함
<?php
$ctg_id= "<select name='ctg_mainmenu' style='background: #ccccff; color: #000000; font: 9pt 굴림; width:100%'><option value='0'>--- 카테고리 분류 선택 ---";
// get_ctg_sort(0,0);
$ctg_id.="</select>";
?>
-->
<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>
<!-- DB연동시 사용하고자함 <?=$s_ctg_id?>
<script language="javascript">document.form1.ctg_mainmenu.value="<?=$row[$goods_id]?>";</script></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>
그누에서 한참 찾았보니 없는것 같아서요...
그냥 아주 사소한 것이지만 초보에게는 무척 필요한 소스일것 같아 올립니다.
사용방법은 그냥 통째로 갈무리해서 필요한 부분만 수정하시면 될것 같아요...
<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>
<!-- DB연동시 사용하고자함
<?php
$ctg_id= "<select name='ctg_mainmenu' style='background: #ccccff; color: #000000; font: 9pt 굴림; width:100%'><option value='0'>--- 카테고리 분류 선택 ---";
// get_ctg_sort(0,0);
$ctg_id.="</select>";
?>
-->
<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>
<!-- DB연동시 사용하고자함 <?=$s_ctg_id?>
<script language="javascript">document.form1.ctg_mainmenu.value="<?=$row[$goods_id]?>";</script></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>
그누에서 한참 찾았보니 없는것 같아서요...
그냥 아주 사소한 것이지만 초보에게는 무척 필요한 소스일것 같아 올립니다.
사용방법은 그냥 통째로 갈무리해서 필요한 부분만 수정하시면 될것 같아요...
댓글 5개
19년 전
깔끔하고 신기하네요.
이것을 어디에 적용해야 할지 활용도는 높을 것 같네요.
이것을 어디에 적용해야 할지 활용도는 높을 것 같네요.
19년 전
유용한 팁입니다.
좋은 팁을 공개해 주셔서 감사드립니다.
좋은 팁을 공개해 주셔서 감사드립니다.
용된지렁이
19년 전
좋은팁감사합니ㅏㄷ^^
ohora
19년 전
수고하셨네요. ㄱ마사합니다.
13년 전
좋네요... 감사합니다
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3309 | 3년 전 | 1809 | ||
| 3308 | 11년 전 | 2096 | ||
| 3307 |
uPAmJ903
|
6년 전 | 4757 | |
| 3306 |
바른사나이
|
6년 전 | 3276 | |
| 3305 | 6년 전 | 12313 | ||
| 3304 | 7년 전 | 3707 | ||
| 3303 | 7년 전 | 3746 | ||
| 3302 |
지리산초보
|
7년 전 | 13599 | |
| 3301 |
sozet
|
8년 전 | 4907 | |
| 3300 |
sozet
|
8년 전 | 5975 | |
| 3299 |
sozet
|
8년 전 | 10864 | |
| 3298 | 8년 전 | 4019 | ||
| 3297 |
또치하우스
|
8년 전 | 4448 | |
| 3296 | 8년 전 | 11977 | ||
| 3295 |
또치하우스
|
8년 전 | 14989 | |
| 3294 | 8년 전 | 6031 | ||
| 3293 | 8년 전 | 5595 | ||
| 3292 |
 bluells |
9년 전 | 5324 | |
| 3291 | 9년 전 | 13684 | ||
| 3290 | 9년 전 | 5057 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기