layui获取select下拉框选中的option的值

layui获取select下拉框选中的option的值

使用javascript原生的方法(直接使用onchange方法无效，因为layui将select改造了)

表单如下

注意需要加上lay-filter="status"

<form class="layui-form" action="">
	<div class="layui-form-item">
		<label class="layui-form-label">状态：</label>
			<div class="layui-input-inline" style="width:100px">
				<select id='status' name="status"  layui-verify="required" lay-filter="status" >
                 	<option value='0' <c:if test='${demo.status == 0}'>selected</c:if>>无效</option>
                    <option value='1' <c:if test='${demo.status == 1}'>selected</c:if>>有效</option>
                </select>
			</div>
		</div>
</form>

js取值

<script type="text/javascript">
	layui.use('form', function(){
		var form = layui.form;
		form.on('select(status)', function(){
			//1:拿到select对象： 
			var myselect=document.getElementById("status");
			//2：拿到选中项的索引：
			var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
			//3:拿到选中项options的value： 
			console.log(myselect.options[index].value);
			//4:拿到选中项options的text： 
			console.log(myselect.options[index].text);
		});
	});
</script>

效果如下