jQuery - select 박스 내용 show/hide
weBtonG
제이쿼리
0
6073
0
2021.05.14 10:56
상단 붉은색바를 클릭하시면 해당 사이트로 이동합니다.
select 박스를 이용하여 하단의 내용이 보이고 숨기는 간단한 스크립트입니다.
웹사이트 제작 시 일반 회사에서 공시/공고 페이지 제작 시에 가끔 사용하여 미리 제작해 두었습니다.
간단히 제이쿼리를 이용하여 제작되었으며, 저도 포스팅을 해두면 바로 사용할 수 있어 등록하였습니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ $("#x_select").change(function() { $(".v_none").css("display","none"); $("#table"+$(this).val()+":not(:animated)").fadeIn("slow"); }); }); </script> <style> .content_wrap {max-width: 400px;margin: 0 auto} .v_none {display: none;margin: 20px auto;border: 1px solid;padding: 20px} #x_select {-webkit-appearance: none;-moz-appearance: none;appearance: none;border: solid 1px #cbcbcb;border-radius: 3px;padding: 0 40px 0 10px;background: url(http://temp20.zsol.co.kr/all_img/ico_select.png) right center no-repeat #fff;height: 41px;width: 100%} </style> <div class="content_wrap"> <select id="x_select"> <option value="1" selected>첫 번째 셀렉트 박스</option> <option value="2">두 번째 셀렉트 박스</option> <option value="3">세 번째 셀렉트 박스</option> <option value="4">네 번째 셀렉트 박스</option> <option value="5">다섯 번째 셀렉트 박스</option> <option value="6">여섯 번째 셀렉트 박스</option> <option value="7">일곱 번째 셀렉트 박스</option> </select> <div id="table1" class="v_none" style="display:block">첫 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table2" class="v_none">두 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table3" class="v_none">세 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table4" class="v_none">네 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table5" class="v_none">다섯 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table6" class="v_none">여섯 번째 셀렉트 박스 내용이 들어갑니다.</div> <div id="table7" class="v_none">일곱 번째 셀렉트 박스 내용이 들어갑니다.</div> </div> |
셀렉트박스, select, select_box, 레이어, 숨김, 보임, 제이쿼리, change, jQuery
