My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 7079 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

Select box 간 Option 값 이동, 삭제 , 추가 하는 샘플코드 입니다.


Test Url : http://www.uhoon.co.kr/test/5237.html


<!DOCTYPE html>
<html>
<head>
	<title>append option / remove option</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
	<table>
		<tr>
			<td>
				<select id="sel" name="sel" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
					<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="Delete" id="btnRemoveLeft"/>
				<input type="button" value="Selected Value " id="getValue"/>
				<input type="button" value="All Value " id="getSelectedValue"/>
				<br>
				<br>
				<input type="text" id="addOption"  style="width:183px;"/>
				<input type="button" value="Add" id="btnAdd"/>
			</td>
			<td>
				<input type="button" value="Move=>" id="btnMoveRight"/><br/>
				<input type="button" value="<=Move" id="btnMoveLeft"/><br/>
				<input type="button" value="Copy=>" id="btnCopyLeft"/><br/>
				<input type="button" value="<=Copy" id="btnCopyLeft2"/><br/>
			</td>
			<td>
				<select id="sel2" name="sel2" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
				</select>
				<br>
				<br>
				<input type="button" value="Delete" id="btnRemoveRight"/>
				<input type="button" value="Selected Value " id="getValue2"/>
				<input type="button" value="All Value" id="getSelectedValue2"/>
				<br>
				<br>
				<input type="text" id="addOption2"  style="width:183px;"/>
				<input type="button" value="Add" id="btnAdd2"/>
			</td>
		</tr>
	</table>
</body>

	<script type="text/javascript">
	<!--
		$(function(){
			$("#btnRemoveLeft").on("click",function(){
				$('#sel option:selected').each( function() {
					$(this).remove();
				});
			});

			$("#btnRemoveRight").on("click",function(){
				$('#sel2 option:selected').each( function() {
					$(this).remove();
				});
			});

			$("#btnMoveRight").on("click",function(){
				$('#sel option:selected').each( function() {
					$(this).remove().appendTo('#sel2');
				});
			});

			$("#btnMoveLeft").on("click",function(){
				$('#sel2 option:selected').each( function() {
					$(this).remove().appendTo('#sel');
				});
			});

			$("#getValue").on("click",function(){
				var values = "";
				$('#sel option').each( function() {
					values= values + "/" + $(this).val();
				});
				alert(values);
			});

			$("#getValue2").on("click",function(){
				var values = "";
				$('#sel2 option').each( function() {
					values= values + "/" + $(this).val();
				});
				alert(values);
			});

			$("#getSelectedValue").on("click",function(){
				var values = "";
				$('#sel option:selected').each( function() {
					values= values + "/" + $(this).val();
				});
				alert(values);
			});

			$("#getSelectedValue2").on("click",function(){
				var values = "";
				$('#sel2 option:selected').each( function() {
					values= values + "/" + $(this).val();
				});
				alert(values);
			});

			$("#btnCopyLeft").on("click",function(){
				$('#sel option:selected').each( function() {
					$(this).clone().appendTo('#sel2');
				});
			});

			$("#btnCopyLeft2").on("click",function(){
				$('#sel2 option:selected').each( function() {
					$(this).clone().appendTo('#sel');
				});
			});

			$("#btnAdd").on("click",function(){
				if($('#sel').find("[value='"+$('#addOption').val().replace('"','\'')+"']").length == 0)
				{
					$('#sel').append('<option value="'+$('#addOption').val().replace('"','\'')+'">'+$('#addOption').val()+"</option>");
				}else{
					alert("있어요.");
				}
			});

			$("#btnAdd2").on("click",function(){
				if($('#sel2').find("[value='"+$('#addOption2').val().replace('"','\'')+"']").length == 0)
				{
					$('#sel2').append('<option value="'+$('#addOption2').val().replace('"','\'')+'">'+$('#addOption2').val()+"</option>");
				}else{
					alert("있어요.");
				}
			});
		});

		$(window).load(function(e){

		});

	//-->
	</script>
</html>
?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
54 UI woothemes FlexSlider - 슬라이더 file kay 2014.09.16 286184
53 PlugIn jQuery Plugin For Auto Resizing iFrame - iFrame Resizer file kay 2014.03.10 105355
52 UI SelectBox Option 값 초기화 및 수정 삭제 kay 2013.03.02 36655
51 PlugIn fancyBox - 레이어팝업 (추천) kay 2013.04.16 32407
50 etc 에러 리포팅 , Ajax 디버깅 ( JS , ASP ) - 오류메시지 확인하기 kay 2013.03.08 30612
49 UI animate - 각종 애니메이션 효과 kay 2013.04.11 26329
48 A to Z CheckBox 값 읽어오기 kay 2013.05.06 25267
47 etc Table에 동적 Tr 추가/삭제 하기 kay 2014.02.09 21271
46 PlugIn jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 ) 10 file kay 2014.02.09 20152
45 UI 스크롤 탑 컨트롤 - scrolltop control kay 2013.05.29 18965
44 PlugIn makisu - 메뉴 접기(?) kay 2013.04.16 18446
43 PlugIn tiptip - 툴팁 kay 2013.04.14 17886
42 PlugIn jQuery Org Chart - 조직도 그리기 file kay 2014.09.01 16605
41 PlugIn 자동 롤링 배너 Jquery 2 file kay 2013.08.07 13877
40 PlugIn Star Rating Plugin - jQuery 별점 주기 2 file kay 2014.05.01 13219
39 PlugIn Smooth Scroll - 스크롤 이동 ( 속도 , 위치 ) 2 file kay 2013.04.06 12676
38 PlugIn poshytip - 툴팁 kay 2013.04.15 11803
37 UI 동적으로 추가된 객체에 datepicker() 적용하기 kay 2013.11.06 10120
36 etc 한글/영어 byte 체크해서 자르기 1 kay 2013.11.30 9702
35 UI select Box option ( 초기화,추가,삭제 ) kay 2013.04.03 9529
Board Pagination Prev 1 2 3 Next
/ 3