[Javascript] multiple select로 select 목록 만들기 / 다중 select 만들기 / 목록 넣고 빼기 / select control / select 선택한 option

multiple select로 select 목록 만들기 / 다중 select 만들기 / 목록 넣고 빼기 

left select		right select
1 2 3		a b c

소스

<table>
	<tr>
		<th>left select</th>
		<th></th>
		<th>right select</th>
	</tr>
<tr>
	<td>
		<select multiple="multiple" id='left_list'>
			<option value='1'>1</option>
			<option value='2'>2</option>
			<option value='3'>3</option>
		</select>
	</td>
	<td>
		<button href="#" onclick="moveToRight(); return false;" class="btn">==></button>
		<br><br>
		<button href="#" onclick="moveToLeft(); return false;" class="btn"><==</button>
	</td>
	<td>
		<select multiple="multiple" id='right_list'>
			<option value='a'>a</option>
			<option value='b'>b</option>
			<option value='c'>c</option>
		</select>
	</td>
</tr>
</table>


<script>
//오른쪽에서 제거하고 왼쪽으로 옮기기
function moveToLeft() {
	$('#right_list option:selected').each(function(index, obj) {
		var value = obj.value;
		var text = obj.text;

		$('#right_list').find('option[value="'+ value +'"]').remove();
		 
		
		$('#left_list').append('<option value="'+value +'">'+text+'</option>')
	});
}

//왼쪽에서 제거하고 오른쪽으로 옮기기
function moveToRight() {
	$('#left_list option:selected').each(function(index, obj) {
		var value = obj.value;
		var text = obj.text;
		
	
		$('#left_list').find('option[value="'+ value +'"]').remove();
		 

		$('#right_list').append('<option value="'+value +'">'+text+'</option>')
	});
}
</script>

 

**기타 select 관련 control

select의 value 가져오기

//vanilla javascript
document.getElementById('select_list').value

//jquery
$('#select_list').val()

 

select의 선택한 option DOM 가져오기

//vanilla javascript
document.getElementById('select_list').options[document.getElementById('select_list').selectedIndex]

//jquery
$('#select_list option:selected')

 

선택한 option DOM의 사용자 data property 접근

<option value="111" data-sub_type="num">옵션에 이런 property가 있는 경우</option>

//vanilla javascript(dataset으로 접근)
document.getElementById('select_quatro_list').options[document.getElementById('select_quatro_list').selectedIndex].dataset.sub_type

//jquery(data로 접근)
$('#select_quatro_list option:selected').data('sub_type')

 

select에 option 추가/제거

//option 붙이기
$('#select_list').append('<option value="엥">엥</option>')

//option 떼기
$('#select_list').find('option[value=vvv]').remove();

 

select 에서 선택된 options들 가져와서 반복문 돌리기

$('#select_list option:selected').each(function(index,obj){
	var value = obj.value;
	var cont_type = obj.dataset.cont_type;
	var text = obj.text
})