select 박스 유동적인 변화

https://www.w3schools.com/code/tryit.asp?filename=GAIKR3AY2JSD

Tryit Editor v3.6

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

    function select_top(cc){
$(".motors_option_car007").hide();
$("#motors_option_car_"+cc).show();
}
    
</script>


<div class="select-category-box">

<!-- 첫번째 셀렉트박스는 차종별 -> 2차메뉴들 입니다. -->
<!-- 첫번째 셀렉트 박스 시작 -->
<div class="select-box" id="car_companys">
                             <select name="company" id="cate_option_car007" onchange="select_top(this.value);">
                                <option value="">선택</option>
                                <option value="007001">현대</option>
                                <option value="007002">기아</option>
                                <option value="007003">쉐보레</option>
                                </select></div>
<!-- 첫번째 셀렉트 박스 끝 -->

<!-- 두번째 셀렉트박스는 차종별 -> 2차메뉴 -> 3차메뉴 -> 4차메뉴들 입니다. -->
<!-- 두번째 셀렉트 박스 시작 -->
<div class="select-box" id="sel_motors">
                             <select class="motors_option_car007" name="motors" id="motors_option_car_007001" onchange="car_model_select_top('007001');" style="display: inline-block;">
                                <option value="">선택</option>
                                <option id="i30" value="007001001">i30</option>
                                <option id="i30(뉴)(12~)" value="007001002">i30(뉴)(12~)</option>
                                <option id="i40" value="007001003">i40</option>
                                </select>
                                <select class="motors_option_car007" name="motors" id="motors_option_car_007002" onchange="car_model_select_top('007002');" style="display: none;">
                                <option value="">선택</option>
                                <option id="K5" value="007002001">K5</option>
                                </select>
                                </div>
<!-- 두번째 셀렉트 박스 끝 -->
</div>