셀렉선택시 그에 해당하는 내용들만 나오는?

조회수 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>

왼쪽 셀렉트 선택마다 폼이 바뀌지 않고 선택된 조건에 맞는 바뀌는 스크립트?가 되고싶은데 도저히 찾아봐도 않나와서 이렇게 질문을 들비니다.

*셀렉트시 다른 화면을 불러오지 않고 선택된 조건에 따른 내용들이 걸러지는 효과?를 구상중인데 자바스크립트를 깊게 배우지 못한것같습니다.

  • 일단 질문에 제시된 마크업을 기반으로 동적인 기능을 만들어야 한다면 매우 비효율적입니다. 자바스크립트에서 필터링 및 노출 제어를 위해서 li 태그의 값들을 가져와 파싱해야 하는데 이 과정에서 프로그램의 로직이 매우 깨지기 쉬운 상태가 됩니다. 예외 케이스가 생기면 계속 다시 고쳐야 하고, 확장성도 떨어질 거고요. doodoji 2020.4.6 20:41
  • 만약 해당 데이터를 추출 및 정제에 성공했다면 아니면 애초에 그런 데이터가 있다면 이 후 작업은 좀 쉬워집니다. 아마 배열로 들고 있을텐데 각 데이터와 그 데이터에 해당하는 뷰(오른쪽 섹션의 아이템)를 매핑시키고 조건을 통과하는 뷰만 class혹은 CSS의 display 속성으로 직접 조절하면 됩니다. doodoji 2020.4.6 20:43
  • 만약 마크업 수정이 가능하다면 data-binding 시킨 view를 구성하는 것도 좋습니다. HTML 속성으로 data-* 속성을 지정할 수 있으니 마크업 단계에서 정적으로 속성값을 지정해 놓고 사용하는 것이죠. https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 doodoji 2020.4.6 20:51
  • 기본기가 너무 부족하다는걸 너무나 절실히 알았습니다.. 감사합니다 윤우섭 2020.4.7 09:12

1 답변

  • 좋아요

    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>
    

    찾아서 안 나오는 이유는 매우 기본기라서 그런거고요.

    주니어개발자 타이틀을 달고 질문하셨으니 완전한 기능을 구현해 드리면 질문자분 역량 상승에 방해가 될 것 같기에 컨셉만 살아있는 코드를 알려드렸습니다.

    정답은 없으니 여러 방향으로 고민하고 접근해 보세요.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)