那些經常使用但後臺開發寫起來卻不順手的js（2）——下拉框事件

正文目錄
一、用jquery實現點擊下拉框獲取選中的值
二、用layer實現
三、用vue實現

一、用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);
		})
	})

效果以下：

二、用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時，只要選擇下拉框選項就會執行。

三、用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。