동적 셀렉트 박스 추가 삭제

https://nahosung.tistory.com/28

div 동적 생성 (appendChild) 자바스크립트

//appendChild를 사용하여 div를 동적으로 추가해주는 자바스크립트입니다.

<script type="text/javascript">
function add_div(){    
	var div = document.createElement('div');    
    div.innerHTML = document.getElementById('room_type').innerHTML;    
    document.getElementById('field').appendChild(div);
   
 }
 
 
 function remove_div(obj){
 	document.getElementById('field').removeChild(obj.parentNode);
}

</script>

//아래와 같은 html이 있으면,  
//추가버튼을 클릭하면 room_type이란 id를 가진 div를 복사하여
//field란 id를 가진 div에 생성해주는 소스입니다.

//삭제를 눌렀을경우에는 삭제해주는 소스입니다.
<input type="button" value="추가" onclick="add_div()">
<br/>
<div id="room_type">
	<div class="form-group">	
    	<label for="image">제목</label>	
        <input type="text" id="title" name="title" class="form-control" ></input>
 	</div>
 	<input type="button" value="삭제" onclick="remove_div(this)">
</div>
<div id="field"></div>

//출처: https://nahosung.tistory.com/28 [nahos:티스토리]

---

이렇게 작성함 

1.jsp

<select name="testSelect" id="testSelect" class="style8">
	<option value="">데이터를 선택해 주세요.</option>
	<option value="데이터1">데이터1</option>
	<option value="데이터2">데이터2</option>
	<option value="데이터3">데이터3</option>
</select>
<div id="addArea"></div>
<button type="button" id="add_button" name="add_button" class="btn8" onclick="javascript:add_testData();">추가</button>


<button type="button" id="test_button" name="test_button" class="btnTest" onclick="javascript:submitdata();">*입력 데이터 확인용*</button>

2. js

var selectBoxNum = 0; //셀렉트박스를 5개까지만 사용할거라서  

function submitdata(){ //모든 셀렉트박스의 데이터 읽어오기
	var tempData =  $("select[name='testSelect']").val(); //1번 셀렉트박스에서 선택한 옵션
	
	for(var i=1;i<=selectBoxNum;i++){
		var SelectBoxID = "testSelect"+i; //추가될 셀렉트박스영역의 ID 생성
		var SelectBoxValue = $("select[name='"+SelectBoxID+"']").val(); //새로 추가한 셀렉트박스에서 선택한 옵션값
		var UndefinedCheck = typeof SelectBoxValue != "undefined"; //셀렉트박스를 삭제하면 값이 'undefined'로 들어가서 걸러줌
		var emptyCheck = SelectBoxValue != ""; //셀렉트박스만 추가하고 옵션을 선택하지 않은 경우 걸러줌
		
		if(UndefinedCheck && emptyCheck){ //해당 셀렉트 박스에 값이 있으면
			tempData += ","+$("select[name='"+SelectBoxID+"']").val(); //콤마(,)를 구분자로 데이터 누적
		}
	}
	
	console.log("선택한 옵션값 : "+ tempData);
}




function add_testData(){ //추가버튼 눌렀을 때

	//1번 셀렉트박스에 값이 없으면 return 
	//셀렉트 박스 추가할 수 없음 
	//1번셀렉트박스는 삭제버튼도 없기 때문에 삭제불가. 반드시 선택해야 함.
	if($("select[name='testSelect']").val() == "" ){ 
		alert("셀렉트박스의 옵션을 선택해주세요.");
		return;
	}
	
	if(selectBoxNum < 4){
		selectBoxNum += 1; 
		
		var testSelectID = "testSelect"+selectBoxNum; //추가 셀렉트박스 ID생성
		
		var div = document.createElement('div'); //div생성
		
		var addData = "<select name='"+testSelectID+"' id='"+testSelectID+"' class='style8'>"; // 셀렉트박스 생성
		
		//1번 셀렉트박스안에 옵션값 가져옴
		addData += document.getElementById('testSelect').innerHTML;
		
		addData += "</select>";
		
		addData += "<button type='button' id='remove_button' name='remove_button' class='remove_btn' onclick='javascript:remove_addArea(this);'>삭제</button>";
		
		div.innerHTML = addData ;
		//필요한 모양으로 만들어서 addArea영역에 삽입
		document.getElementById('addArea').appendChild(div);
	}
	
	if(selectBoxNum == 4){ //셀렉트박스 5개까지만 사용할거니까 추가버튼 숨김
		$('#add_button').hide();
	}
	
}

function remove_adddArea(obj){//삭제버튼 눌렀을 때
	document.getElementById('addArea').removeChild(obj.parentNode);
	selectBoxNum -= 1;
	if(selectBoxNum < 4){
		$('#add_button').show(); //삭제해서 셀렉트박스가 5개 미만이면 추가버튼 노출
	}
}

코드를 그대로 가져올 수 없어서 이름 같은거 변경했는데.. 잘 적었겠지.. '-'

화면 캡쳐도 못해서..이해가 어려울 수 있으나.

 

1. jsp에 기본 셀렉트박스 하나 그려두고

2. '추가' 버튼을 누르면

3. 기본 셀렉트박스 + 삭제버튼 을

4. 기본 셀렉트박스 아래 div에 추가한다.

5. 셀렉트박스는 5개까지 생성이 가능하며

다섯개를 모두 생성한 경우 추가버튼은 보이지 않는다.

6. 셀렉트박스를 삭제하여 5개가 아닌 경우 추가버튼은 다시 보인다.