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 [여명의집]