[一]下拉框获值与显示或隐藏div——如何选中下拉框值之后立马去js中获取、点击按钮之后出现的弹框里div隐藏或显示

JDK1.7+Tomcat7.0+Eclipse+SSM+Bootstrap（含Bootstrap Table）   

①

搜索框里输入：“点击下拉框并选择时js获取值”，点开好几个链接，都没有找到我想要的答案，然后我改下我问的问题 “ 如何选中下拉框值之后再去js中获取 ” ，就找到了！！！

怎样用js取得select下拉列表框内选中的option的value值呢

学习：

Js获取下拉框当前选择项的文本和值【获取下拉框的值、文本】

②

怎么让一个div显示一个div隐藏

学习：

html_div显示与隐藏相关内容

div css隐藏内容样式方法【DIVCSS5网站的】

 我找了这两个之后，成果：

脚本：

//初始化新增
	    $("#btn_add").click(function(){
	    	$("#classIds").hide();//隐藏div
	    })
	    // $("#typeId").click(function(){
	    function showTypeId(){
		    var index=document.getElementById("typeId").selectedIndex;
		    alert("索引------"+index);//当下标（从0开始）或索引为3时,就显示div
		    if(index==3){
				$("#classIds").show()//显示div
			}
		}
	    $("#next").click(function(){
	    	$.post();
	    })

jsp的body（主要页面代码）：

<button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-1">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
。。。。。
<!-- Modal模态框 -->
<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" style="width:200px;">请选择类别</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" id="form1" name="form1">
                <div class="modal-body">
                    <input type="hidden" id="noticeId" name="noticeId">
                    <div class="form-group">
                        <label for="typeId" class="control-label">发送类别</label>
                        <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>
                    <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>
                </div>
           </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="next" data-dismiss="modal">下一步</button>
            </div>
        </div>
    </div>
</div>

页面显示：

点新增之后，出现的模态框，不能出现id为“classIds”的div

选择"指定班级"时，显示“id为classIds”的div：

想看接下来的完整版的能真正使用的模态框：

请看——————————【[二]在jsp中使用foreach用于"显示复选框"】