jQuery Select Box Option 동적 추가 , 이동, 삭제 , 복사
Open API/Jquery2016. 11. 17. 11:29
반응형
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>
<input type="button" value="Delete" id="btnRemoveLeft"/>
<input type="button" value="Selected Value " id="getValue"/>
<input type="button" value="All Value " id="getSelectedValue"/>
<input type="text" id="addOption" style="width:183px;"/>
<input type="button" value="Add" id="btnAdd"/>
</td>
<td>
<input type="button" value="Move=>" id="btnMoveRight"/>
<input type="button" value="<=Move" id="btnMoveLeft"/>
<input type="button" value="Copy=>" id="btnCopyLeft"/>
<input type="button" value="<=Copy" id="btnCopyLeft2"/>
</td>
<td>
<select id="sel2" name="sel2" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
</select>
<input type="button" value="Delete" id="btnRemoveRight"/>
<input type="button" value="Selected Value " id="getValue2"/>
<input type="button" value="All Value" id="getSelectedValue2"/>
<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>
댓글()
