因为jquery选择下拉框触发事件的实现而焦头烂额，先前我用了对下拉框option中的id用了click事件，在火狐中竟然能运行而在其他浏览器却不行，这让我一度以为是浏览器兼容问题。

错错错，option中没有id也没有click事件。

我的天，超级发现问题超级开心。

下面是我的实现。

所需知识

bind（）方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

其语法为：

$(selector).bind(event,data,function)

参数说明如下：

event：规定添加到元素的一个或多个事件。必需。
data：规定传递到函数的额外数据。可选。
function：规定当事件发生时运行的函数。必需。

实现步骤：

在select的option中添加value值，便于区分，就设置为123
导入jquery的cdn
先将tongzhi和shiyan这两个div块隐藏
选择select添加bind() 方法
在function中进行判断，如果为value=2，那么显示shiyan，否则显示其他页面。

<!DOCTYPE HTML>
<html>

	<head>
		
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"></script>
		<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
		<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
		<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link href="../../后台/Hplus-v/css/datetime/bootstrap-datetimepicker.min.css" rel="stylesheet" />
		<link rel="shortcut icon" href="favicon.ico">

		<link href="../../后台/Hplus-v/css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<link href="../../后台/Hplus-v/css/animate.css" rel="stylesheet">
		<link href="../../后台/Hplus-v/css/style.css?v=4.1.0" rel="stylesheet">

		<!-- 全局js -->
<!--		<script src="../../后台/Hplus-v/js/jquery.min.js"></script>-->
	<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<!--	<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
<!--<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>-->

		<script src="../../后台/Hplus-v/js/bootstrap.min.js?v=3.3.6"></script>

		<!-- 自定义js -->
		<script src="../../后台/Hplus-v/js/content.js?v=1.0.0"></script>

		<!-- layerDate plugin javascript -->
		<script src="../../后台/Hplus-v/js/plugins/layer/laydate/laydate.js"></script>
		<script>//外部js调用
laydate({
	elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
	event: 'focus' //响应事件。如果没有传入event，则按照默认的click
});

//日期范围限制
var start = {
	elem: '#start',
	format: 'YYYY/MM/DD hh:mm:ss',
	min: laydate.now(), //设定最小日期为当前日期
	max: '2099-06-16 23:59:59', //最大日期
	istime: true,
	istoday: false,
	choose: function(datas) {
		end.min = datas; //开始日选好后，重置结束日的最小日期
		end.start = datas //将结束日的初始值设定为开始日
	}
};
var end = {
	elem: '#end',
	format: 'YYYY/MM/DD hh:mm:ss',
	min: laydate.now(),
	max: '2099-06-16 23:59:59',
	istime: true,
	istoday: false,
	choose: function(datas) {
		start.max = datas; //结束日选好后，重置开始日的最大日期
	}
};
laydate(start);
laydate(end);</script>
		
        <script >  $(function() {
  	$("#shiyan").hide();
  	$("select").bind("change", function() {
  		if(this.value == "2") {

  			$("#tongzhi").hide();
  			$("#shiyan").show();
  		} else {

  			$("#shiyan").hide();
  			$("#tongzhi").show();
  		}
  	})
  });</script> 
		<style type="text/css">
			body,
			html {
				overflow-x: hidden;
			}
			
			.div1 {
				display: block;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				width: 90%;
				/*padding-bottom: 100%*/
			}
			
			.selectpicker {
				display: block;
				width: 100%;
				height: 34px;
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.42857143;
				color: #555;
				background-color: #fff;
				background-image: none;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
			
			.demo-input {
				padding-left: 10px;
				height: 38px;
				min-width: 262px;
				line-height: 38px;
				border: 1px solid #e6e6e6;
				background-color: #fff;
				border-radius: 2px;
			}
			
			.demo-footer {
				padding: 50px 0;
				color: #999;
				font-size: 14px;
			}
			
			.demo-footer a {
				padding: 0 5px;
				color: #01AAED;
			}
		</style>
		<script type="text/javascript">var ue=UE.getEditor('editor1');
var ue=UE.getEditor('editor2');
var ue=UE.getEditor('editor3');</script>
	
	</head>

	<body class="gray-bg">

		<div class="div1">
			<br>
			<br>
			<h1>发布文章</h1>

			<hr style="border:5px solid #DDDDDD" />
			<br>
			<!--文章分类-->
			<div class="col-lg-2" style="margin-top: 50px;">文章分类：</div>
			<div class="col-lg-10" style="margin-top: 50px;">
				<select  name="se1" id="se1" class="selectpicker" style="width: 100%;">
					<option value="0" name="option1" >通知</option>
					<option value="1" name="option2">内部通知</option>
					<option value="2" name="option3">实验项目简介及连接</option>

				</select>
			</div>
			<!--通知-->

			<div id="tongzhi"  >

				<!--项目名称-->
				<div class="col-lg-2" style="margin-top: 50px;">标题：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <input type="text" class="form-control" id="inputXiang" placeholder="输入内容" /></div>

				<!--作者成员-->
				<div class="col-lg-2" style="margin-top: 50px;">作者：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<input type="text" class="form-control" id="inputXiang" placeholder="输入内容" />
				</div>

				<!--是否评论-->
				<div class="col-lg-2" style="margin-top: 50px;">是否评论：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <label class="radio-inline">
  						<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 是
						</label>
					<label class="radio-inline">
 						 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 否
						</label></div>

				<!--正文-->
				<div class="col-lg-2" style="margin-top: 50px;">内容：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<!--<script id="editor1" type="text/plain" style="width:1109px;height:500px;"></script>-->
					<div id="editor1" type="text/plain" style="width:1109px;height:500px;"></div>
				</div>

				<!--确定-->
				<div class="col-lg-2" style="margin-top: 50px;"></div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<button class="btn btn-primary btn-block" onclick="alert('发布成功')">确定</button>
				</div>
			</div>

			<!--实验项目-->
			<div id="shiyan"  >
			

				<!--项目名称-->
				<div class="col-lg-2" style="margin-top: 50px;">项目名称：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <input type="text" class="form-control" id="inputXiang" placeholder="输入内容" /></div>


				<!--项目名称-->
				<div class="col-lg-2" style="margin-top: 50px;">项目名称：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <input type="text" class="form-control" id="inputXiang" placeholder="输入内容" /></div>

				<!--项目简介-->
				<div class="col-lg-2" style="margin-top: 50px;">项目简介：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<!--<script id="editor2" type="text/plain" style="width:1109px;height:500px;"></script>-->
					<div id="editor2" type="text/plain" style="width:1109px;height:500px;"></div>
				</div>

				<!--作者成员-->
				<div class="col-lg-2" style="margin-top: 50px;">作者成员：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<input type="text" class="form-control" id="inputXiang" placeholder="输入内容" />
				</div>

				<!--上限日期-->
				<div class="col-lg-2" style="margin-top: 50px;">上限日期：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<input class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
					<label class="laydate-icon"></label>

				</div>

				<!--进入查看-->
				<div class="col-lg-2" style="margin-top: 50px;">进入查看：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <input type="text" class="form-control" id="inputXiang" placeholder="输入内容" /></div>

				<!--是否评论-->
				<div class="col-lg-2" style="margin-top: 50px;">是否评论：</div>
				<div class="col-lg-10" style="margin-top: 50px;"> <label class="radio-inline">
  						<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 是
						</label>
					<label class="radio-inline">
 						 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 否
						</label></div>

				<!--正文-->
				<div class="col-lg-2" style="margin-top: 50px;">正文：</div>
				<div class="col-lg-10" style="margin-top: 50px;">
				<!--	<script id="editor3" type="text/plain" style="width:1109px;height:500px;"></script>-->
				<div id="editor3" type="text/plain" style="width:1109px;height:500px;"></div>
				</div>

				<!--确定-->
				<div class="col-lg-2" style="margin-top: 50px;"></div>
				<div class="col-lg-10" style="margin-top: 50px;">
					<button class="btn btn-primary btn-block" onclick="alert('发布成功')">确定</button>
				</div>
			</div>
	</body>

</html>

这是我项目里的一个html页面，我就不把css给你们了，不过复制粘贴应该能运行，反正jquery下拉框选择触发事件是实现了。

jquery选择下拉框触发事件的实现

所需知识

实现步骤：

猜你喜欢