select3.htm셀렉트 리스트 박스에서 jquery를 이용한 추가와 삭제
위아래 이동
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<form name="form1" method="post" action="">
<p>
<select name="select_box1" size="12" id="select_box1" style="width:200px;">
<option value="1-1">1-1</option>
<option value="1-2">1-2</option>
<option value="1-3">1-3</option>
<option value="2-1">2-1</option>
<option value="2-2">2-2</option>
<option value="2-3">2-3</option>
<option value="3-1">3-1</option>
<option value="3-2">3-2</option>
<option value="3-3">3-3</option>
<option value="4-1">4-1</option>
<option value="4-2">4-2</option>
<option value="4-3">4-3</option>
</select>
</p>
<p><input type="text" name="text1" id="text1" /> <input name="add" type="button" id="add" value="add"></p>
<p>
<input type="submit" name="Submit" value="Submit">
<input name="▲" type="button" id="up" value="▲">
<input name="▼" type="button" id="down" value="▼">
<input name="del" type="button" id="del" value="del">
</p>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
$('#select_box1').click().change(function() {
selValue = $("#select_box1 option:selected").val(); //선택된 값의 value
selText = $("#select_box1 option:selected").text(); //선택된 값의 Text
selIndex = $("#select_box1 option").index($("#select_box1 option:selected")); //선택된 값의 index
selBox = $("#select_box1");
selOption = selBox.attr("options");
});
/*
$('#up').click(function() {
var selValue = $("#select_box option:selected").val(); //선택된 값의 value
var selText=$("#select_box option:selected").text(); //선택된 값의 Text
var selIndex = $("#select_box option").index($("#select_box option:selected")); //선택된 값의 index
alert(selIndex);
// $("#selectBox option:eq("+selIndex-1+")").replaceWith("<option value='"+selValue+"'>"+selText+"</option>");
$('#selectBox').append(new Option('Foo', 'foo', true, true));
// $("#selectBox option:eq("+selIndex+")").replaceWith("<option value='"+selValue-1+"'>"+selText-1+"</option>");
})
*/
$('#up').click(function() {
/*
var newOptions = {
'red' : 'Red',
'blue' : 'Blue',
'green' : 'Green',
'yellow' : 'Yellow'
};
/*
$("option", selBox).remove();
$.each(newOptions, function(val, text) {
selOption[selOption.length] = new Option(text, val);
});
*/
$('#select_box1').click() //아래의 변수를 함수로 만들어서 호출
/*
var selValue = $("#select_box1 option:selected").val(); //선택된 값의 value
var selText=$("#select_box1 option:selected").text(); //선택된 값의 Text
var selIndex = $("#select_box1 option").index($("#select_box1 option:selected")); //선택된 값의 index
var selBox = $("#select_box1");
var selOption = selBox.attr("options");
*/
// preIndex=selIndex-1;
if(selIndex==-1){
alert("선택한 메뉴가 없습니다.");
return;
}else if(selIndex==0){
alert("최상위 메뉴를 선택하셨습니다.");
return;
}else{
/*
temp=a;
a=b;
b=temp;
tempValue = $("#select_box1 option:eq("+preIndex+")").val()
tempText = $("#select_box1 option:eq("+preIndex+")").text()
$("#select_box1 option:eq("+preIndex+")").val(selValue)// 한칸위에는 현재 선택한 값을 적용
$("#select_box1 option:eq("+preIndex+")").text(selText)// 한칸위에는 현재 선택한 글자를 적용
$("#select_box1 option:eq("+selIndex+")").val(tempValue)// 현재 선택한 값에는 한칸위에 값을 입력
$("#select_box1 option:eq("+selIndex+")").text(tempText)// 현재 선택한 글자는 한칸위에 글자를 입력
$("#select_box1 option:eq("+preIndex+")").attr("selected", "selected");//한칸 위에 것을 선택한 것처럼 표시
*/
//위에 문장을 jquery로 더욱 간단하게
$("#select_box1 option:eq("+selIndex+")").remove();
$("#select_box1 option:eq("+(selIndex-1)+")").before("<option value='"+selValue+"'>"+selText+"</option>");
$("#select_box1").val(selValue);
}
});
$('#down').click(function() {
$('#select_box1').click() //아래의 변수를 함수로 만들어서 호출
/*
var selValue = $("#select_box1 option:selected").val(); //선택된 값의 value
var selText=$("#select_box1 option:selected").text(); //선택된 값의 Text
var selIndex = $("#select_box1 option").index($("#select_box1 option:selected")); //선택된 값의 index
var selBox = $("#select_box1");
var selOption = selBox.attr("options");
*/
// var nextIndex = selIndex+1;
if(selIndex==-1){
alert("선택한 메뉴가 없습니다.");
return;
}else if($("#select_box1 option").size()==selIndex+1){
alert("최하위 메뉴를 선택하셨습니다.");
return;
}else{
$("#select_box1 option:eq("+selIndex+")").remove();
$("#select_box1 option:eq("+selIndex+")").after("<option value='"+selValue+"'>"+selText+"</option>");
$("#select_box1").val(selValue);
}
});
$('#add').click(function() {
$('#select_box1').click() //아래의 변수를 함수로 만들어서 호출
/*
var selValue = $("#select_box1 option:selected").val(); //선택된 값의 value
var selText=$("#select_box1 option:selected").text(); //선택된 값의 Text
var selIndex = $("#select_box1 option").index($("#select_box1 option:selected")); //선택된 값의 index
var selBox = $("#select_box1"); //셀렉트 박스
var selOption = selBox.attr("options"); // 셀렉트 박스의 리스트개체들
*/
text1=$("#text1").val().replace(/\s/g,""); //앞,뒤,중간 모든 공백 없앰
if(text1.length>0){
$("#select_box1").append("<option value='"+text1+"'>"+text1+"</option>");
}else{
alert("선택이 잘못 되었습니다.");
return;
}
});
$('#del').click(function() {
$('#select_box1').click() //아래의 변수를 함수로 만들어서 호출
/*
var selValue = $("#select_box1 option:selected").val(); //선택된 값의 value
var selText=$("#select_box1 option:selected").text(); //선택된 값의 Text
var selIndex = $("#select_box1 option").index($("#select_box1 option:selected")); //선택된 값의 index
var selBox = $("#select_box1"); //셀렉트 박스
var selOption = selBox.attr("options"); // 셀렉트 박스의 리스트개체들
*/
msg="하위 메뉴도 자동 삭제 됩니다. 삭제하시겠습니까?"
if(selIndex>=0&&confirm(msg)){
$("#select_box1 option:eq("+selIndex+")").remove();
}else{
alert("선택이 잘못 되었습니다.");
return;
}
});
//-->
</SCRIPT>
</body>
</html>
리스트 박스의 값을 asp로 구분자(@) 끼어 넣고 넘기기
select3v2.asp
select3v2.htm수정 하기 포함
참조사이트 : http://www.electrictoolbox.com/jquery-add-option-select-jquery/
'FrameWork > jQuery' 카테고리의 다른 글
| 팝업 레이어 - JQuery 사용 (0) | 2012.06.19 |
|---|---|
| 폼의 편의성이나 디자인을 강화하는 jQuery 플러그인 (0) | 2012.02.10 |
| jquery selectbox option 순서 이동 (0) | 2012.02.10 |
| Easy Widgets를 이용한 정렬 순서 수정 (0) | 2012.02.09 |
| select option Add/Remove (0) | 2012.02.09 |