奇怪的LayUI下拉框

最新推荐文章于 2024-08-31 02:09:17 发布

dawn

最新推荐文章于 2024-08-31 02:09:17 发布

阅读量1.2k

点赞数 2

分类专栏： Others LayUI 文章标签： layui jquery 前端 php

本文链接：https://blog.csdn.net/dawn0718/article/details/122137286

版权

Others 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

LayUI

15 篇文章 3 订阅

订阅专栏

博客讲述了在使用LayUI框架实现二级联动下拉框时遇到的问题，包括下拉框不显示和只能显示一次的问题。作者尝试了多种解决方案，最终通过改用select标签并配合layui的form模块成功实现了联动效果。问题在于dropdown组件的渲染和数据更新。文章还提供了PHP获取数据的示例，并分享了解决方案。

摘要由CSDN通过智能技术生成

　　今天要做一个二级联动的下拉框，看了LayUI的文档，感觉应该很容易。

　　与联动下拉框相关的html文件主要内容：

    <div class="layui-form-item">
        <label class="layui-form-label">联系单位</label>
        <div class="layui-input-inline">
			  <button class="layui-btn layui-btn-primary demo2" >
				<label id="outUnit">请选择工作联系单位</label>
				<i class="layui-icon layui-icon-down layui-font-12"></i>
			  </button>			
        </div>
        <label class="layui-form-label">实施人员</label>
        <div class="layui-input-inline">
			  <button class="layui-btn layui-btn-primary demo3" >
				<label id="outUnitMember">请选择实施人员</label>
				<i class="layui-icon layui-icon-down layui-font-12"></i>
			  </button>									
        </div>
    </div>

　　JavaScript内容：

	var arrOutUnitList = [];
	var arrOutUnitMemberList = [];
	
	layui.use(['dropdown', 'util', 'layer', 'table','form'], function(){
	  var dropdown = layui.dropdown
	  ,layer = layui.layer
	  ,$ = layui.jquery
	  ,form=layui.form;
	  
		$.ajax({
			url:'getOutUnitList.php',
			type:'POST',
			success:function (data) {
				for (var i in data) {
					arrOutUnitList.push(data[i]);    
				}
			}
		});
	  
	  //下拉列表的赋值
	  dropdown.render({
		elem: '.demo1'
		,data: [
			{title: '日常维护',id: 101},
			{title: '定期巡检',id: 102},
			{title: '数据处理',id: 103},
			{title: '帐号权限',id: 104},
			{title: '视频会议',id: 105},
			{title: '网络运维',id: 106},
			{title: '耗材购置',id: 107},
			{title: '其他工作',id: 108},
			]
		,click: function(obj){
			document.getElementById('workType').innerHTML=obj.title;
		},
	  })
	  
	  dropdown.render({
		elem: '.demo2',
		data: arrOutUnitList,
		click: function(obj){
			document.getElementById('outUnit').innerHTML=obj.title;
			arrOutUnitMemberList = [];
			$.ajax({
				url:'getOutUnitMemberList.php',
				data:"C01="+obj.title,
				type:'POST',
				async:false,
				success:function (data) {								
					for (var i in data) {
						arrOutUnitMemberList.push(data[i]);
					}
				}
			});
											
		}
	  })
	  
	  dropdown.render({
		elem: '.demo3'
		,data: []
		,click: function(obj){
			document.getElementById('outUnitMember').innerHTML=obj.title;
		    //layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
		}
	  })	  
	  
	});

　　本以为就搞定了，可是点击联系单位后，实施人员下拉框就是不显示，太奇怪了！

　　让组件重新渲染也不行。

　　那就初始化不赋值了，改变赋值位置，就是将实施人员的赋值在联系单位下拉框的点击事件里：

	  dropdown.render({
		elem: '.demo2',
		data: arrOutUnitList,
		click: function(obj){
			document.getElementById('outUnit').innerHTML=obj.title;
			arrOutUnitMemberList = [];
			$.ajax({
				url:'getOutUnitMemberList.php',
				data:"C01="+obj.title,
				type:'POST',
				async:false,
				success:function (data) {								
					for (var i in data) {
						arrOutUnitMemberList.push(data[i]);
					}
				}
			});
            //将实施人员下拉框的赋值放到这里，并且删除它的初始化赋值
			dropdown.render({
				elem: '.demo3',
				data: arrOutUnitMemberList,
				click: function(obj){
					document.getElementById('outUnitMember').innerHTML=obj.title;
				}
			});
		}
	  })

　　可以显示了，问题又来了！只能显示一次的点击。就是第一此点击联系单位，选择一个单位后，对应的实施人员可以显示出来了，可是再次换单位，实施人员的下拉框不变化了！

　　怎么会这么奇怪？看官网文档，也没有这方面的说明，这么优秀的一个框架怎么会出现这样的问题？

　　折腾了4个小时，投降了，换成select好操作一些。

　　HTML部分更改为：

    <div class="layui-form-item">
        <label class="layui-form-label">联系单位</label>
        <div class="layui-input-inline">
            <select name="outUnitList" id="outUnitList" lay-filter="outUnitList">
				<option value=""></option>
			</select>

        </div>
        <label class="layui-form-label">实施人员</label>
        <div class="layui-input-inline">
            <select name="outUnitMember" id="outUnitMember">
				<option value=""></option>
			</select>
        </div>
    </div>

　　Javascript部分更改为：

		$.ajax({
			url:'getOutUnitList.php',
			type:'POST',
			success:function (data) {
				for (var i in data) {
					arrOutUnitList.push(data[i]);
					$('#outUnitList').append(new Option(data[i], data[i]));	
				}
				form.render('select');
			}
		});
	  
	  //下拉列表的赋值
	  dropdown.render({
		elem: '.demo1'
		,data: [
			{title: '日常维护',id: 101},
			{title: '定期巡检',id: 102},
			{title: '数据处理',id: 103},
			{title: '帐号权限',id: 104},
			{title: '视频会议',id: 105},
			{title: '网络运维',id: 106},
			{title: '耗材购置',id: 107},
			{title: '其他工作',id: 108},
			]
		,click: function(obj){
			document.getElementById('workType').innerHTML=obj.title;
		},
	  });
 
	 form.on('select(outUnitList)', function(data){
		 var selectUnitName = data.value; //选择的单位名称
		 // console.log(selectUnitName);
		 $.ajax({
			 url: 'getOutUnitMemberList.php',
			 data:"C01="+selectUnitName,
			 dataType: 'json',
			 type: 'post',
			 success: function (returnData) {
				 $('#outUnitMember').empty();
				// for (var i in returnData) {
				// 	$('#outUnitMember').append(new Option(returnData[i], returnData[i]));	
				// }
				 $.each(returnData, function (index, value) {
					 $('#outUnitMember').append( new Option(value, value) );
				 });
				 form.render('select');
			 }
		 });
	 });

　　php获取实施人员：

<?php
require 'DRlinkConfig.php';
$C01 = $_POST['C01'];
$sql = "select * from droutunitmemberlist where c01='$C01'";
$res = $mysqli->query($sql);
$returnReslut = array();
while ($row = $res->fetch_array()){	
	array_push( $returnReslut,$row['C03']);
}
header('Content-type:text/json');
echo json_encode($returnReslut);
$res->free();
$mysqli->close();
?>

　　解决两个下拉框联动的问题了。

　　今天遇到的这个问题真感到奇怪。