带查询的动态搜索框

最新推荐文章于 2024-02-23 23:51:32 发布

colocola

最新推荐文章于 2024-02-23 23:51:32 发布

阅读量209

点赞数

分类专栏： layUI 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_41608559/article/details/126145628

版权

layUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>复投桶装料系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- 样 式 文 件 -->
	<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
	<!-- 引入layui js -->
	<script src="https://www.layuicdn.com/layui/layui.js"></script>

</head>
<!-- 代 码 结 构 -->
<body>
<div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select id="selectId" name="interest" lay-filter="city">
      </select>
    </div>
  </div>
  
  
  <script>
	  layui.use(['form','jquery'], function(){
	  	
	    //----------模块----------
	    var form = layui.form,$=layui.$;
	    
	    //动态添加下拉框     同时可以设置默认值
	    $.ajax({
	      url:'http://127.0.0.1:8080/hello',
	      dataType:'json',
	    
	      success:function(data){
			 alert(JSON.stringify(data))
	      
	          $.each(data.data,function(index,item){
	          	console.log(item);
	          	//option  第一个参数是页面显示的值，第二个参数是传递到后台的值
	          	$('#selectId').append(new Option(item.username));//往下拉菜单里添加元素
	          	//设置value（这个值就可以是在更新的时候后台传递到前台的值）为2的值为默认选中
	          	$('#selectId').val(2);
	          })
	   
	          form.render(); //更新全部表单内容
	  		//form.render('select'); //刷新表单select选择框渲染
	      }
	     });
	  });
  </script>
</body>
</html>

后端返回的数据如下：
{“code”:200,“data”:[{“age”:12,“sex”:“男”,“username”:“张三”,“userpassword”:“123”},{“age”:22,“sex”:“女”,“username”:“李白”,“userpassword”:“4576”}]}

实现效果图：
在这里插入图片描述