[jquery] select 선택에 따라 두번째 select 변경하기

첫번째 select 선택시 두번째 select 내용 변경하기

 

 

 <script type="text/javascript">
        $(document).ready(function () {
			var sel1 = {"":'선택',"뉴스":"뉴스","논문":"논문"}
            var sel2_1 = {"기후변화":'기후변화',"기후":"기후","온난화":"온난화"}
            var sel2_2 = {"논문기후변화":'논문기후변화',"논문기후":"논문기후","논문온난화":"논문온난화"}

			//option 호출
            function setOption(maparr, selected){
                var html = '';
                var keys = Object.keys(maparr);
                for(var i in keys){
                    html += "<option value='"+keys[i] + "'>" + maparr[keys[i]] + "</option>";
                }
                $("select[id='"+selected+"']").html(html);
            }


            $("select[id='sel1']").on("change",function(){
               var option = $("#sel1 option:selected").val();
               var subSelName = '';
               if(option == "뉴스"){
                   subSelName = "sel2_1";
               }else if(option == "논문"){
                   subSelName = "sel2_2";
               }else{
                   $("#sel2").hide();
                   return;
               }
               $("#sel2").show();
                setOption(eval(subSelName), "sel2");
                console.log("nn > "+subSelName);

            });
            setOption(sel1, "sel1");
            
            
        });//document

   </script>

 

    <select id="sel1" name="sel1"></select>

    <select id="sel2" name="sel2" style="display: none"></select>

 

 

 

 

첫번째 select 선택에 따라 두번째 select 내용이 변경됨을 확인할 수 있다.