-
htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script><script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script><link href="main.css" rel="stylesheet"/>
<body>
<h4 id="title">제목</h4>
<p id="text">상품내용</p><form class="container my-5">
<div class="form-group">
<p>상품선택</p>
<select class="form-control" id="option1" onchange="cha()" >
<option>모자</option>
<option>셔츠</option>
</select><div class="sizeSelect">
<P class="mt-4">사이즈선택</P>
<select class="form-control" id="option2">
<option>95</option>
<option>100</option>
<option>105</option>
</select>
</div>
</div>
</form>
</body><script>
function cha(){
let selectId = document.getElementById('option1');let selectVal= selectId.options[selectId.selectedIndex].value;
let result = document.getElementsByClassName('sizeSelect');
if(selectVal === '셔츠'){
result.style.display = 'block';
console.log(selectVal);
console.log(result);
}
}var obj = { brand: 'BMW', model: 520}
var Arr = [ 'BMW', 520];
var file = [{brand: 'Tesla'}, {model : 520}]let t = document.getElementById('title');
// t.innerHTML=Arr[0];document.getElementById('title').innerHTML = file[0].brand;
document.getElementById('text').innerHTML = file[1].model;</script>
</html>CSS
/* object.html*/
.sizeSelect{
display: none;
}
.on{
display: block;
}근데 화면에서 셔츠를 선택하면
이 메시지와 함께 디스플레이로 변경이 안됩니다 .ㅠㅠ
- 답변은 로그인 후 가능합니다.