select
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html(), text(), val()</title>
<style type="text/css">
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//select 폼에서 내가 선택한 Encore 지부가 resultView 계속해서 출력되도록...html()를 이용하세요.
//select에서는 click()함수가 아니고, change()함수 입니다.
$('#creatSel').change(function() {
var result=$('#resultView').html();
var item =$(this).val();
//이와같은 의미를 포함하고 있습니다.
//var item =$('#createSel>option:selected').val();
//this에서 val()로 값을 가져오면 선택된 값이(<option>?</option>이 사이에 있는 ?값이 오게 됩니다.)
//$(this).val()을 쓰는 이유는 select가 form field기 때문입니다. (html(), text()를 안씁니다.)
//alert(item);//item에 값이 잘 들어갔는지 확인합니다.
$('#resultView').html(result+item+'<p>');
});
});
</script>
</head>
<body>
<input type="button" value="버튼 클릭시 동적으로 문자열 생성" id="creatBtn">
<select id="creatSel">
<option>Encore Academy 남부지구</option>
<option>Encore Academy 서초지구</option>
<option>Encore Academy 판교지구</option>
<option>Encore Academy 가산디지털지구</option>
<option>Encore Academy 삼성지구</option>
</select>
<div id="resultView"></div>
</body>
</html>
each+select+array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select_each</title>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1. 새로운 option tag들을 추가하는 코드_1
/* //클릭 할때 마다 추가가 되는 걸 막기위한 방법1
$('#addOptionBtn').on('click', function() {
var arr=['하경', '재은', '해경', '은채', '미경', '연희', '소희'];
//1.each()함수를 사용하여 배열안의 사람의 이름을 select>option 이라는 자식 태그를 만들어서 붙임... append()를 사용합니다.
var a = $(arr).each(function(index) {
var option='<option value='+arr[index]+'>'+arr[index]+'</option>'
$('#friend').append(option);//html()이거 하면 마지막꺼만 들어감.
})//each
$(this).unbind();
})
//클릭 할때 마다 추가가 되는 걸 막기위한 방법2
$('#addOptionBtn').one('click', function() {
var arr=['하경', '재은', '해경', '은채', '미경', '연희', '소희'];
//1.each()함수를 사용하여 배열안의 사람의 이름을 select>option 이라는 자식 태그를 만들어서 붙임... append()를 사용합니다.
var a = $(arr).each(function(index) {
var option='<option value='+arr[index]+'>'+arr[index]+'</option>'
$('#friend').append(option);//html()이거 하면 마지막꺼만 들어감.
})//each
}) */
//2.새로운 option tag들을 추가하는 코드_2
$('#addOptionBtn').one('click', function() {
var arr=['하경', '재은', '해경', '은채', '미경', '연희', '소희'];
var a = $(arr).each(function(index, item) {
var option='<option value='+item+'>'+item+'</option>'
$('#friend').append(option);
})//each
})
//3. 생성된 폼을 제거....remove();
$('#deleteOptionBtn').click(function() {
$('#friend>option').remove();
})//each
});
</script>
</head>
<body>
<input type="button" value="옵션 생성" id="addOptionBtn">
<input type="button" value="옵션 삭제" id="deleteOptionBtn">
<select id="friend"></select>
</body>
</html>
