layui 动态添加Select下拉框的option项

最新推荐文章于 2022-12-22 11:44:33 发布
最新推荐文章于 2022-12-22 11:44:33 发布
阅读量1k 收藏 1
点赞数
文章标签： js javascript jquery html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/magezhitu/article/details/106742032
版权
本文记录了在工作中使用layui框架动态添加Select下拉框option项的方法。首先创建select标签，接着通过JavaScript通信获取数据并动态赋值。同时提到了layui下拉框select值的监听技巧。
摘要由CSDN通过智能技术生成

工作中用到了，到这里记录一下
先是写一个select标签

<select name="interest-search"  id="test" lay-verify="required">
     <option>请选择</option>//这里写一个option是为了给下拉项一个默认选择项
</select>

然后在js中通信后进行动态赋值，这里贴上关键代码


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  传说中的钻石勇者
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
layui 实现往 select 标签里面添加 option

				
			

			

				

					Shelly Long的博客
				

				

					07-06
					
					1941
					
				

			

		

		

			
				
模块和jQuery库。请确保你已经引入了Layui和jQuery的相关文件。下面是一个基本的示例，展示如何使用Layui和jQuery来往。，你需要使用Layui的。要使用Layui来往。

			
		

	



                

              
                



	

		

			

				
					
Layui动态添加下拉选项值以及根据后台返回数据默认选中某项值的功能

				
			

			

				

					Welcome to my blog
				

				

					05-23
					
					8830
					
				

			

		

		

			
				
最近项目遇到需要动态加载option选项后还要默认选中某项值的问题，折磨了几天终于试出了目前可以解决的方法。

两种方式各有优劣：

HTML：


<td><span class="colorRed">*</span>运抵国家：</td>
<td>
    <select name="currency" id="currency"...

			
		

	



                


  
              

                


	

		

			

				
					
Layui下拉框之select模糊搜索查询功能

					
热门推荐

				
			

			

				

					慕白Lee的博客
				

				

					09-10
					
					4万+
					
				

			

		

		

			
				
Layui超实用10篇技术解决方案：https://blog.csdn.net/libusi001/article/details/100065911

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、HTML代码


<form class="layui-form" action="">
            <label class="l...

			
		

	





	

		

			

				
					
Layui select 的动态添加

				
			

			

				

					laizhixue的博客
				

				

					11-29
					
					1万+
					
				

			

		

		

			
				
layui的select 若已经给了选项的数据，它还会动态生成另外一段代码 &lt;dl class="layui-anim layui-anim-upbit"/&gt;，若想自己添加动态的数据，则我们也需要添加 &lt;dl class="layui-anim layui-anim-upbit"/&gt;的选项数据，否则，select会失效。

添加两段选项的代码：

$("#GoodsModi...

			
		

	



		

			
		



	

		

			

				
					
.net使用layui框架下。绑定搜索下拉框-模糊查询

				
			

			

				

					小熊猫
				

				

					06-09
					
					741
					
				

			

		

		

			
				
网上找了些，没一个全的，自己总结了下

页面部分：


<select id="selManageUserID" lay-search>                                                                 
                                </select>

JS部分：


$(function () {
            layui.use(['layer', 'form', 'la

			
		

	





	

		

			

				
					
layui表单验证select下拉框实现验证的方法

				
			

			

				

					12-29
				

			

		

		

			
				
layui 的form表单里的select 一开始以为加上lay-verify=”required”就可以验证不空了,可是反复试了几次都不能验证 代码如下：  <div class=layui-form-item>  <label class=layui-form-label>所属工种:  ...

			
		

	





	

		

			

				
					
Layui带搜索的下拉框的使用以及动态数据绑定方法

				
			

			

				

					12-13
				

			

		

		

			
				
方法内部会发送一个POST请求到指定的API，获取数据后，遍历并使用JavaScript的`append()`方法将数据项添加到select元素中。同时，为了提供“请选择”选项，需要在数据前添加一个空value的option。  ```javascript ...

			
		

	





	

		

			

				
					
Layui 动态禁止select下拉的例子

				
			

			

				

					12-10
				

			

		

		

			
				
author：咔咔 wechat：fangkangfk 前端代码  js代码   // 禁止select点击  function disSelect()  {  var level = $('#is_level1').val();... layer.msg('一级分类父级不可修改');...以上这篇Layui 动态禁止selec

			
		

	





	

		

			

				
					
Layui-select 下拉框实现拼音全拼匹配/首字母模糊搜索

				
			

			

				

					weixin_43702272的博客
				

				

					05-06
					
					137
					
				

			

		

		

			
				
Layuilayui(谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架。亲测很好用，很好看。官网：http://www.layui.com/github：https://github.com/sentsin/layui
插播一条相关博客：Layui-select 修复搜索之后上下键的bug
研究select搜索功能的实现layui的select组件自带搜索功能，只要在select标签...

			
		

	





	

		

			

				
					
layui 中 给 select下拉框添加选项( 赋值)

				
			

			

				

					业余前端的职业经历
				

				

					01-08
					
					1万+
					
				

			

		

		

			
				
在layui中如果是给 input输入框赋值的话 那么 直接就可以 通过 form.val() 的方式赋值



但是吧 select下拉框还是有点奇怪的 他可不能那样赋值 有些刚用layui 比如博主这样的菜鸟 还就是那样做的 哈哈哈

给 select 元素绑定一个 id 一会用来添加元素


<div class="layui-form">
        <div class="layui-form-item">
            <labe...

			
		

	





	

		

			

				
					
layui 动态加入select option无法显示问题

				
			

			

				

					cf
				

				

					12-22
					
					1659
					
				

			

		

		

			
				
2.此时虽然成功加入了，但是无法显示出来，原因是没有重新渲染，使用form.render('select') 即可。

			
		

	





	

		

			

				
					
layui select动态添加option

				
			

			

				

					
				

				

					04-22
					
					864
					
				

			

		

		

			
				
layui select动态添加option

layui.use(['form', 'layedit', 'laydate'], function () {
  // layui.code();
  var $ = layui.jquery,
    form = layui.form
    , layer = layui.layer
    , layedit = layui.layedit
    , laydate = layui.laydate;

$.g...

			
		

	





	

		

			

				
					
CSDN第一篇：layui table表格加入select表单元素option动态赋值并回显

				
			

			

				

					DaySurprise的博客
				

				

					04-09
					
					1万+
					
				

			

		

		

			
				
及上一篇的select表单元素加入table中是静态的option列表值，这一篇讲怎么动态给这个select赋值：

一.首先在表格加载(render)前,获取那个select需要的option集合


<script type="text/javascript">
    var dictNameOptions = "<option value=''>请选择</op...

			
		

	





	

		

			

				
					
layui select下拉框动态加载失败 无数据

				
			

			

				

					可控的事情要谨慎，不可控的事情要乐观。
				

				

					11-28
					
					1178
					
				

			

		

		

			
				
layui的select 若已经给了选项的数据，它还会动态生成另外一段代码：
<dl class="layui-anim layui-anim-upbit"/>

想自己添加动态的数据，则我们也需要添加：
<dl class="layui-anim layui-anim-upbit"/>

的选项数据，否则，select会失效。
$("#GoodsModifyModel_G...

			
		

	





	

		

			

				
					
layui中select动态渲染

				
			

			

				

					一只喜欢熬夜的鱼
				

				

					09-03
					
					4631
					
				

			

		

		

			
				
在layui中进行select标签编写内的数据可能有情况会失效或者值进行不显示

是因为layui中的规范约定 需利用


layui.use(['form']),function(){

var form = layui.form;

form.render();

}

来进行表格渲染


<div class="layui-form" style="float: left">

<form class="layui-form" action="" lay-filter="te...

			
		

	





	

		

			

				
					
layui动态加载select数据+动态禁用启用select

				
			

			

				

					chijiangyuan1166的博客
				

				

					08-16
					
					1674
					
				

			

		

		

			
				
思路 
手动拼接option，然后使用form.render()重新渲染。加载数据前禁用select并显示“加载中...”，加载完成（异步）后取消禁用select，并重新渲染。 

代码 
  showAddLayer();
  // 显示添加用户弹出层
  function show...

			
		

	





	

		

			

				
					
Layui动态生成下拉框

				
			

			

				

					weixin_44906271的博客
				

				

					04-26
					
					6264
					
				

			

		

		

			
				
目录前言Layui框架实现html页面js写法总结
前言
在写后台管理页面的时候，经常需要有下拉框搜索功能，比如说数据库有一张类型表，那么这个时候的下拉框里选项是需要根据表的数据一致的，当用户修改了数据库数据的时候，下拉框的选项也需要动态的改变。
Layui框架实现
html页面
<form>
    垃圾名称：
    <div class="layui-inline">...

			
		

	





	

		

			

				
					
layUIselect下拉菜单

				
			

			

				

					Sentien_的博客
				

				

					07-21
					
					3364
					
				

			

		

		

			
				
layUI下拉菜单

			
		

	





	

		

			

				
					
layui动态添加下拉框组件并动态渲染数据

					
最新发布

				
			

			

				

					04-04
				

			

		

		

			
				
在使用layui框架进行动态添加下拉框组件并动态渲染数据时，可以使用下面的代码实现：  HTML代码：  ```html <div class="layui-form-item">  <label class="layui-form-label">下拉框：  <div class="layui-input-...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值