셀렉트리스트박스 jquery 이용

셀렉트 리스트 박스에서 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">

</head>

</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>

select3.htm