那些常用但后台开发写起来却不顺手的js（2）——下拉框事件

正文目录
1、用jquery实现点击下拉框获取选中的值
2、用layer实现
3、用vue实现

1、用jquery实现点击下拉框获取选中的值：
html代码如下：

<div style='width:100px;height:50px;margin-left:300px;margin-right:auto;'>
	  <label for="demo">下拉框</label>
	  <select name='sex' id='demo'>
		<option value='男'>男</option>
		<option value='女'>女</option>
	  </select>
    </div>

js代码如下

// 在线引入jquery
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
$(function(){
		$("#demo").on('change', function () {
			//$("input[type=radio][name=sex]").on('click', function () {
			// var item=$('input:radio[name="sex"]:checked').val();
			// 或者
			var item= $(this).val();
			alert(item)
			//console.log(item);
		})
	})

效果如下：

2、用layer实现
注意官网下载layer后需引入文件

<link href="layui-v2.5.5/layui/css/layui.css" rel="stylesheet" />
<script src="layui-v2.5.5/layui/layui.js" type="text/javascript"></script>

注意坑：由于layer会渲染类选择器layer-form,若不引入css文件，可能导致页面渲染了但缺少样式，页面错乱，点击不到对应的标签位置，不会触发js事件，其实js监听事件是执行的。

html代码如下

<div class="layui-form" style='width:100px;height:50px;margin-left:300px;margin-right:auto;'>
	  <label for="demo">下拉框</label>
	  <select name='sex' id='demo' lay-filter='demoSelect'>
		<option value='男'>男</option>
		<option value='女'>女</option>
	  </select>
    </div>

js代码如下：

layui.use(['element','form', 'table','layer'], function () {
	  let form = layui.form, layerDom = layui.layer, element = layui.element;
	  form.render()
	  form.on('select(demoSelect)', function (data) {
				//alert(data.elem);
				//console.log(data.elem);
				alert(data.value);//判断单选框的选中值
				//console.log(data.value);
	  });

	})

综上：用jquery绑定select的change事件，当选择同一个选中的对象时，jquery不会执行，只有选择当前不同的选项时才会执行。用layer时，只要选择下拉框选项就会执行。

3、用vue实现

用vue需要引入文件如下：
先引入jquery，再引入vue.js即可

 <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
 <script src="vue.js" type="text/javascript"></script>

html代码如下：

<div id='app' style='width:100px;height:50px;margin-left:300px;margin-right:auto;'>
	  <label for="demo">下拉框</label>
	  <select name='sex' id='demo' v-model="type" @change='selectValue'>
		<option value='男' >男</option>
		<option value='女' >女</option>
	  </select>
</div>

js代码如下

var app = new Vue({
		el:'#app',
		data:{
			type:'男',
		},
		created:function(){
			var _this = this;
		},
		methods:{
            submit: function () {

            },
			selectValue:function(event){
				let _this = this
				_this.type = event.target.value
				alert(_this.type)
            }
		},

	});

效果图：

综上：用vue获取和方法一用jquery监听change事件一样，也是当选择不同项时才会执行js，选择相同项目时不会执行js。