SELECT 박스로 배열순서 변경 후 순서입력 받기

홈페이지 제작/JavaScript 2005. 10. 6. 11:39
<html>
<title></title>
<head>
<script language="javascript">

// 배열을 순서대로 저장
function ListSubmit(form)
{
if (confirm("카테고리의 배열순서를 변경하시겠습니까?"))
{
gnum = form.category_list.options.length;
value_arr = "";

for (i=0;i<gnum;i++)
{
if (i == 0)
{
value_arr = form.category_list.options[i].value;
}
else
{
value_arr = value_arr + "," + form.category_list.options[i].value;
}
}

form.category_code.value = value_arr;
form.submit();
}
else
{

}
}

// 상,하 이동
function moveCategory(type,form)
{
var movewidth = parseInt(form.movewidth.value);
var thisform = eval(form);
var sel = thisform.category_list.selectedIndex;
var targetpos = sel - movewidth;

if (type == "U")
{
if (sel > 0)
{
if (targetpos < 0) targetpos = 0;
curvalue = thisform.category_list.options[sel].value;
curtext = thisform.category_list.options[sel].text;

for (i=sel-1;i>=targetpos;i--)
{
thisform.category_list.options[i+1].value = thisform.category_list.options[i].value;
thisform.category_list.options[i+1].text = thisform.category_list.options[i].text;
}
thisform.category_list.options[targetpos].value = curvalue;
thisform.category_list.options[targetpos].text = curtext;
thisform.category_list.options[targetpos].selected = true;
}
}
else if (type == "D")
{
if (sel == -1)
{
alert("이동할 항목을 선택하세요");
thisform.category_list.focus();
return;
}
else
{
lastpos = thisform.category_list.options.length-1;
if (sel >= lastpos || sel < 0) return;
targetpos = sel + movewidth;
if (targetpos > lastpos) targetpos = lastpos;
curvalue = thisform.category_list.options[sel].value;
curtext = thisform.category_list.options[sel].text;

for (i=sel+1;i<=targetpos;i++)
{
thisform.category_list.options[i-1].value = thisform.category_list.options[i].value;
thisform.category_list.options[i-1].text = thisform.category_list.options[i].text;
}

thisform.category_list.options[targetpos].value = curvalue;
thisform.category_list.options[targetpos].text = curtext;
thisform.category_list.options[targetpos].selected = true;

}
}
}
</script>
</head>

<body>

<form name="categoryform" method="post" action="./test3.php">

<select name="movewidth" style="width:120px;">
<option value="1">1 칸 이동</option>
<option value="2">2 칸 이동</option>
<option value="3">3 칸 이동</option>
<option value="4">4 칸 이동</option>
<option value="5">5 칸 이동</option>
<option value="6">6 칸 이동</option>
<option value="7">7 칸 이동</option>
<option value="8">8 칸 이동</option>
<option value="9">9 칸 이동</option>
<option value="10">10 칸 이동</option>
</select>

<br><br>

<input type="button" value="▲ 위로 이동" OnClick="moveCategory('U',this.form);" style="width:120px;"><br>
<input type="button" value="▼ 아래로 이동" OnClick="moveCategory('D',this.form);" style="width:120px;"><br><br>

<select name="category_list" size="10" style="width:120px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

<input type="hidden" name="category_code" value=""><br><br>
<input type="button" value="순서변경" onclick="ListSubmit(this.form)" style="width:120;">

</form>
</body>
</html>


위 처럼 하시고 지정된 순서의 값은 category_code 에 "," 구분으로 들어갑니다.
반응형

'홈페이지 제작 > JavaScript' 카테고리의 다른 글

자바스크립트 정규식  (0) 2005.10.21
새창 띄우기 (window.open 옵션)  (0) 2005.10.17
내 홈페이지에 WYSIWYG 에디터를 달아보자  (0) 2005.08.12
자바스크립트 날짜 함수  (0) 2005.02.21
키보드에서 F11 키 사용금지 시키기  (0) 2005.01.10

티스토리툴바