jquery ÇØ´ç°ªÀ¸·Î ¼±ÅÃÇϱâ selector
<!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");
});
/*
56.$('#up').click(function() {
57.var selValue = $("#select_box option:selected").val(); //¼±ÅÃµÈ °ªÀÇ value
58.var selText=$("#select_box option:selected").text(); //¼±ÅÃµÈ °ªÀÇ Text
59.var selIndex = $("#select_box option").index($("#select_box option:selected")); //¼±ÅÃµÈ °ªÀÇ index
60.
61. alert(selIndex);
62.// $("#selectBox option:eq("+selIndex-1+")").replaceWith("<option value='"+selValue+"'>"+selText+"</option>");
63. $('#selectBox').append(new Option('Foo', 'foo', true, true));
64.// $("#selectBox option:eq("+selIndex+")").replaceWith("<option value='"+selValue-1+"'>"+selText-1+"</option>");
65.})
66.*/
$('#up').click(function() {
/*
71. var newOptions = {
72. 'red' : 'Red',
73. 'blue' : 'Blue',
74. 'green' : 'Green',
75. 'yellow' : 'Yellow'
76. };
77. /*
78. $("option", selBox).remove();
79.
80. $.each(newOptions, function(val, text) {
81. selOption[selOption.length] = new Option(text, val);
82. });
83.*/
$('#select_box1').click() //¾Æ·¡ÀÇ º¯¼ö¸¦ ÇÔ¼ö·Î ¸¸µé¾î¼ È£Ãâ
/*
87. var selValue = $("#select_box1 option:selected").val(); //¼±ÅÃµÈ °ªÀÇ value
88. var selText=$("#select_box1 option:selected").text(); //¼±ÅÃµÈ °ªÀÇ Text
89. var selIndex = $("#select_box1 option").index($("#select_box1 option:selected")); //¼±ÅÃµÈ °ªÀÇ index
90. var selBox = $("#select_box1");
91. var selOption = selBox.attr("options");
92.*/
// preIndex=selIndex-1;
if(selIndex==-1){
alert("¼±ÅÃÇÑ ¸Þ´º°¡ ¾ø½À´Ï´Ù.");
return;
}else if(selIndex==0){
alert("ÃÖ»óÀ§ ¸Þ´º¸¦ ¼±ÅÃÇϼ̽À´Ï´Ù.");
return;
}else{
/*
104. temp=a;
105. a=b;
106. b=temp;
107.
108. tempValue = $("#select_box1 option:eq("+preIndex+")").val()
109. tempText = $("#select_box1 option:eq("+preIndex+")").text()
110.
111. $("#select_box1 option:eq("+preIndex+")").val(selValue)// ÇÑÄÀ§¿¡´Â ÇöÀç ¼±ÅÃÇÑ °ªÀ» Àû¿ë
112. $("#select_box1 option:eq("+preIndex+")").text(selText)// ÇÑÄÀ§¿¡´Â ÇöÀç ¼±ÅÃÇÑ ±ÛÀÚ¸¦ Àû¿ë
113. $("#select_box1 option:eq("+selIndex+")").val(tempValue)// ÇöÀç ¼±ÅÃÇÑ °ª¿¡´Â ÇÑÄÀ§¿¡ °ªÀ» ÀÔ·Â
114. $("#select_box1 option:eq("+selIndex+")").text(tempText)// ÇöÀç ¼±ÅÃÇÑ ±ÛÀÚ´Â ÇÑÄÀ§¿¡ ±ÛÀÚ¸¦ ÀÔ·Â
115.
116. $("#select_box1 option:eq("+preIndex+")").attr("selected", "selected");//ÇÑÄ À§¿¡ °ÍÀ» ¼±ÅÃÇÑ °Íó·³ Ç¥½Ã
117.*/
//À§¿¡ ¹®ÀåÀ» 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() //¾Æ·¡ÀÇ º¯¼ö¸¦ ÇÔ¼ö·Î ¸¸µé¾î¼ È£Ãâ
/*
133. var selValue = $("#select_box1 option:selected").val(); //¼±ÅÃµÈ °ªÀÇ value
134. var selText=$("#select_box1 option:selected").text(); //¼±ÅÃµÈ °ªÀÇ Text
135. var selIndex = $("#select_box1 option").index($("#select_box1 option:selected")); //¼±ÅÃµÈ °ªÀÇ index
136. var selBox = $("#select_box1");
137. var selOption = selBox.attr("options");
138.*/
// 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").val($("#text1").val()).attr("selected", "selected");
return;
$('#select_box1').click() //¾Æ·¡ÀÇ º¯¼ö¸¦ ÇÔ¼ö·Î ¸¸µé¾î¼ È£Ãâ
/*
160. var selValue = $("#select_box1 option:selected").val(); //¼±ÅÃµÈ °ªÀÇ value
161. var selText=$("#select_box1 option:selected").text(); //¼±ÅÃµÈ °ªÀÇ Text
162. var selIndex = $("#select_box1 option").index($("#select_box1 option:selected")); //¼±ÅÃµÈ °ªÀÇ index
163. var selBox = $("#select_box1"); //¼¿·ºÆ® ¹Ú½º
164. var selOption = selBox.attr("options"); // ¼¿·ºÆ® ¹Ú½ºÀÇ ¸®½ºÆ®°³Ã¼µé
165.*/
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
182. var selText=$("#select_box1 option:selected").text(); //¼±ÅÃµÈ °ªÀÇ Text
183. var selIndex = $("#select_box1 option").index($("#select_box1 option:selected")); //¼±ÅÃµÈ °ªÀÇ index
184. var selBox = $("#select_box1"); //¼¿·ºÆ® ¹Ú½º
185. var selOption = selBox.attr("options"); // ¼¿·ºÆ® ¹Ú½ºÀÇ ¸®½ºÆ®°³Ã¼µé
186.*/
msg="ÇÏÀ§ ¸Þ´ºµµ ÀÚµ¿ »èÁ¦ µË´Ï´Ù. »èÁ¦ÇϽðڽÀ´Ï±î?"
if(selIndex>=0&&confirm(msg)){
$("#select_box1 option:eq("+selIndex+")").remove();
}else{
alert("¼±ÅÃÀÌ À߸ø µÇ¾ú½À´Ï´Ù.");
return;
}
});
//-->
</SCRIPT>
</body>
</html>
Ãâó: http://uip80.tistory.com/entry/jquery-ÇØ´ç°ªÀ¸·Î-¼±ÅÃÇϱâ-selector?category=317570 [¿©¸íÀÇÁý]