Select 인풋/자바스크립트로 html 생성하는 법
Select 선택하면 다른 select 나오게 하기
셔츠 선택시 사이즈 나오게 하기
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2">
<option>모자</option>
<option>셔츠</option>
</select>
<select class="form-select mt-2 form-hide">
<option>95</option>
<option>100</option>
</select>
</form>
.form-hide {
display: none;
}
document.querySelectorAll('.form-select')[0].addEventListener('input', function(){
var value = $('.form-select').eq(0).val();
if (value == '셔츠') {
document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
}
});
자바스크립트로 html 생성하는 법
<div id="test">
</div>
<script>
var a = '<p>안녕</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', a);
</script>
-
문자자료로 html을 만든 다음
-
insertAdjacentHTML() 안에 넣으면 됩니다.
-
'beforeend' 이건 안쪽 맨 밑에 추가하라는 뜻입니다.
Q. 저는 안쪽에 추가하는게 아니라 아예 바꾸고 싶은데요..
A. div찾아서 innerHTML = '<p></p>'
쓰면 됩니다
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2">
<option>모자</option>
<option>셔츠</option>
</select>
<select class="form-select mt-2 form-hide">
<option>95</option>
<option>100</option>
</select>
</form>
.form-hide {
display: none;
}
document.querySelectorAll('.form-select')[0].addEventListener('input', function(){
var value = $('.form-select').eq(0).val();
if (value == '셔츠') {
document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
}
});
<div id="test">
</div>
<script>
var a = '<p>안녕</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', a);
</script>
-
문자자료로 html을 만든 다음
-
insertAdjacentHTML() 안에 넣으면 됩니다.
-
'beforeend' 이건 안쪽 맨 밑에 추가하라는 뜻입니다.
Q. 저는 안쪽에 추가하는게 아니라 아예 바꾸고 싶은데요..
A. div찾아서 innerHTML ='<p></p>'
쓰면 됩니다
바지를 누르면 사이즈를 28, 30으로 나오게 하기
<select class="form-select mt-2">
<option>바지</option>
</select>
<select class="form-select mt-2 form-hide">
<option>95</option>
<option>100</option>
</select>
.form-hide {
display: none;
}
document.querySelectorAll('.form-select')[0].addEventListener('input', function(){
var value = $('.form-select').eq(0).val();
if (value == '바지'){
document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
var 템플릿 = `<option>28</option><option>30</option>`;
document.querySelectorAll('.form-select')[1].innerHTML=템플릿;
}
});
단, 옵션에 다른요소가 있으면 선택했을 시 28,30은 안나오도록 구현해야함
pants 데이터 갯수만큼 <option>
을 생성하고싶으면?
forEach 반복문
var pants = [28, 30, 32];
pants.forEach(function(a, i){
console.log(a)
});
var pants = [28, 30, 32];
pants.forEach(function(a, i){
console.log(a)
});
콜백함수 안에 파라미터 2개까지 작명이 가능한데 (실은 3개까지)
첫 파라미터는 반복문 돌 때 마다 array 안에 있던 하나하나의 데이터가 되고
둘 째 파라미터는 반복문 돌 때 마다 0부터 1씩 증가하는 정수가 됩니다.
var pants = [28, 30, 32];
document.querySelectorAll('.form-select')[0].addEventListener('input', function(){
var value = $('.form-select').eq(0).val();
if (value == '셔츠') {
document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
}
else if (value == '바지'){
document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
document.querySelectorAll('.form-select')[1].innerHTML='';
pants.forEach(function(a){
$('.form-select').eq(1).append(`<option>${a}</option>`) //제이쿼리
})
}
});
반복문의 용도
-
코드복붙하고싶으면
-
array, object 자료 다 꺼내고 싶을 때
반복문 사용하면 유용합니다.
arrow function 문법
특히 콜백함수만들 때 자주 쓰는 방법인데
var pants = [28, 30, 32];
pants.forEach(function(a){
console.log(a)
});
pants.forEach((a) => {
console.log(a)
});
function 키워드 대신 => 화살표를 ( ) 우측에 부착해도 똑같이 함수만들 수 있습니다.
저걸 arrow function 이라고 합니다.
pants.forEach( a => {
console.log(this)
});
arrow function은 파라미터가 하나면 () 소괄호 생략해도 봐줍니다.
함수 중괄호 안에 return 한 줄 밖에 없으면 { } 중괄호와 return 동시에 생략해도 봐줍니다.
그래서 간결하니 콜백함수에 자주 사용하는 사람들이 있습니다.
let 함수 = function(){ console.log('안녕') }
let 함수 = () => { console.log('안녕') }
이럴 때도 arrow function이 가끔 보입니다.
그냥 함수와 arrow function의 기능차이는 하나가 있는데
함수 안에서 this를 써야할 경우
- 그냥 함수는 함수 안에서 this를 알맞게 재정의해줍니다.
- arrow function은 함수 안에서 this를 재정의해주지 않고 바깥에 있던 this를 그대로 씁니다.
그래서 이벤트리스너 콜백함수안에서 this를 써야하면 arrow function 쓰면 의도와 다르게 동작할 수도 있습니다.
Author And Source
이 문제에 관하여(Select 인풋/자바스크립트로 html 생성하는 법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ysrz99/Select-인풋-다루기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)