셀렉선택시 그에 해당하는 내용들만 나오는?
조회수 726회
<div id="testimonials" class="section wb" style="float: left;">
<div class="container">
<h3>차종</h3>
<select name="carmodel">
<option value="차종선택">차종선택</option>
<option value="세단">세단</option>
<option value="suv">suv</option>
<option value="소형차">소형차</option>
</select>
</div>
<br>
<div class="container">
<h3>인원수</h3>
<select name="passenger">
<option value="전체">전체</option>
<option value="2인">1~2인</option>
<option value="4인">4인</option>
<option value="4인이상">4인이상</option>
</select>
</div>
<br>
<div class="container">
<h3>대여료</h3>
<select name="passenger">
<option value="전체">전체</option>
<option value="30,000원 이하">30,000원 이하</option>
<option value="30,000원 ~ 50,000원">30,000원 ~ 50,000원</option>
<option value="50,000원 ~ 100,000원">50,000원 ~ 100,000원</option>
<option value="100,000원 이상">100,000원 이상</option>
</select>
</div>
<br>
<div class="container">
<h3>연료규정</h3>
<input type="checkbox" name="fuel" value="전체">전체
<input type="checkbox" name="fuel" value="full to none">full to none
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-lg-4">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/h1.png" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span>
<span>아반테</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 30,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/h2.png" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span>
<span>소나타</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 30,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/h3.png" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span>
<span>그랜져</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 30,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/h4.png" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span>
<span>코나</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 30,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/k1.jpg" class="img-fluid" alt="post-img" />
<div class="date">
<span>기아</span>
<span>k5</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 30,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/k2.png" class="img-fluid" alt="post-img" />
<div class="date">
<span>기아</span>
<span>소렌토</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 30,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/s1.jpg" class="img-fluid" alt="post-img" />
<div class="date">
<span>쌍용</span>
<span>티볼리</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 30,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/j1.jpg" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span>
<span>G70</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 50,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-lg-4">
<div class="post-box">
<div class="post-thumb">
<img src="uploads/j2.jpg" class="img-fluid" alt="post-img" />
<div class="date">
<span>현대</span>
<span>G80</span>
</div>
</div>
<div class="post-info">
<li>인원수 : 1~2인</li>
<li>대여료 : 70,000원</li>
<li>연료 규정 : full to none</li>
<button class="button btn-dark" type="button" data-toggle="modal"
data-target="#exampleModalLong">예약하기</button>
</div>
</div>
</div>
</div>
왼쪽 셀렉트 선택마다 폼이 바뀌지 않고 선택된 조건에 맞는 바뀌는 스크립트?가 되고싶은데 도저히 찾아봐도 않나와서 이렇게 질문을 들비니다.
*셀렉트시 다른 화면을 불러오지 않고 선택된 조건에 따른 내용들이 걸러지는 효과?를 구상중인데 자바스크립트를 깊게 배우지 못한것같습니다.
1 답변
-
<style> .hidden { display: none; } </style> <div class="container"> <h3>인원수</h3> <select id="passenger" name="passenger"> <option value="전체">전체</option> <option value="2인">1~2인</option> <option value="3인">3인</option> <option value="4인">4인</option> <option value="4인이상">4인이상</option> </select> <select id="rentalFee" name="passenger"> <option value="~">전체</option> <option value="~30000">30,000원 이하</option> <option value="30000~50000">30,000원 ~ 50,000원</option> <option value="50000~100000">50,000원 ~ 100,000원</option> <option value="100000~">100,000원 이상</option> </select> </div> <div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="세단" data-passenger="2인" data-rentalfee="30000"> <div class="post-box"> <div class="post-thumb"> <img src="uploads/h1.png" class="img-fluid" alt="post-img" /> <div class="date"> <span>현대</span> <span>아반테</span> </div> </div> <div class="post-info"> <li>인원수 : 1~2인</li> <li>대여료 : 30,000원</li> <li>연료 규정 : full to none</li> <button class="button btn-dark" type="button" data-toggle="modal" data-target="#exampleModalLong">예약하기</button> </div> </div> </div> <div class="col-md-4 col-sm-6 col-lg-4 item" data-carmodel="탱크" data-passenger="3인" data-rentalfee="30000000"> <div class="post-box"> <div class="post-thumb"> <img src="uploads/s1.jpg" class="img-fluid" alt="post-img" /> <div class="date"> <span>대한민국</span> <span>K-2</span> </div> </div> <div class="post-info"> <li>인원수 : 3인</li> <li>대여료 : 30,000,000원</li> <li>연료 규정 : full to none</li> <button class="button btn-dark" type="button" data-toggle="modal" data-target="#exampleModalLong">예약하기</button> </div> </div> </div> <script> const passengerSelector = document.getElementById('passenger'); const rentalFeeSelector = document.getElementById('rentalFee'); const items = Array.from(document.getElementsByClassName('item')); const onChangeHandler = () => { const passenger = passengerSelector.value; const [min = 0, max = Infinity] = rentalFeeSelector.value.split('~').map(n => n || undefined); items .map(item => { item.classList.add('hidden'); return item }) .filter(item => min <= +item.dataset.rentalfee && +item.dataset.rentalfee <= max) .filter(item => passenger === '전체' || item.dataset.passenger === passenger) .forEach(item => item.classList.remove('hidden')); }; passengerSelector.onchange = onChangeHandler; rentalFeeSelector.onchange = onChangeHandler; </script>
찾아서 안 나오는 이유는 매우 기본기라서 그런거고요.
주니어개발자
타이틀을 달고 질문하셨으니 완전한 기능을 구현해 드리면 질문자분 역량 상승에 방해가 될 것 같기에 컨셉만 살아있는 코드를 알려드렸습니다.정답은 없으니 여러 방향으로 고민하고 접근해 보세요.
댓글 입력