如何實現js中當下拉列表中選取固定的值時隱藏和顯示div標簽

這篇文章主要介紹“如何實現js中當下拉列表中選取固定的值時隱藏和顯示div標簽”，在日常操作中，相信很多人在如何實現js中當下拉列表中選取固定的值時隱藏和顯示div標簽問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何實現js中當下拉列表中選取固定的值時隱藏和顯示div標簽”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

<!-- 初始化隱藏 -->
$("#btn_add").click(function(){
	    	$("#classIds").hide();//隱藏div
	    })
	    // $("#typeId").click(function(){
	    function showTypeId(){
<!-- 根據角標進行判斷是是否顯示或隱藏div -->
		    var index=document.getElementById("typeId").selectedIndex;
		    alert("索引------"+index);//當下標（從0開始）或索引為3時,就顯示div
		    if(index==3){
				$("#classIds").show()//顯示div
			}
		}

<select  id="typeId" class="form-control" name="typeId" onchange="showTypeId()">
                            <option value="1" >所有人</option>
                            <option value="2" >所有員工</option>
                            <option value="3" >所有學生</option>
                            <option value="4" >指定班級</option>
                        </select>		

<div class="form-group" id="classIds" name="classIds">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="op1">Games
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="op2">Travel
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="op3">Shopping
                                </label>
                            </div>
                        </div>
                    </div>

到此，關于“如何實現js中當下拉列表中選取固定的值時隱藏和顯示div標簽”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！