动态给option设置selected后，select下拉框显示不正确，selected=“selected”的option

最新推荐文章于 2024-03-07 13:54:27 发布
最新推荐文章于 2024-03-07 13:54:27 发布
阅读量7.2k 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： jquery select html
本文介绍如何正确设置HTML Select元素中的选项为选中状态。通过对比错误与正确的代码示例，解释了jQuery中使用prop方法而非attr方法来设置'selected'属性的原因。


如上图，设置了selected的option对应值为ef，但是下拉框值是cccccc。

//错误代码，
$("#selectId option").removeAttr("select");
$("#selectId option[value='01']").attr("selected",true);

//正确代码

$("#selectId option").porp('selected',false);
$（"option[value='01']").prop("selected",true);//prop使用于固定属性，selected就是select下拉框的固定属性。//attr适用于自定义属性，比如active 









<select id="selectId">
    <option>ccccc</option>
    <option value="02">ee</opiton>
    <option value="01">ef</opiton>
</select>









                

        

    

    
  



    



                



	

		

			

				
					
给Layui的下拉框select动态插入元素，明明调用了form.render()主动进行组件渲染，元素还是不能正常显示。

				
			

			

				

					m0_63445876的博客
				

				

					02-19
					
					1435
					
				

			

		

		

			
				
明明调用了form.render()主动进行组件渲染，元素还是不能正常显示

			
		

	



                

            
              



	

		

			

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

				
			

			

				

					magezhitu的博客
				

				

					06-14
					
					1171
					
				

			

		

		

			
				
工作中用到了，到这里记录一下
先是写一个select标签
<select name="interest-search"  id="test" lay-verify="required">
     <option>请选择</option>//这里写一个option是为了给下拉项一个默认选择项
</select>

然后在js中通信后进行动态赋值，这里贴上关键代码
for (var i = 0; i < textlist.length; i++) {
$(

			
		

	



              


  
              

                


	

		

			

				
					
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

				
			

			

				

					12-13
				

			

		

		

			
				
首先：
引入需要的css和js

<link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" />
[removed][removed]

layui.use('form',function){
var form=layui.form;//注:这是1.0升级到2.0以后的写法,2.

			
		

	





	

		

			

				
					
layui form.render('select', 'test2') 更新渲染的方法

				
			

			

				

					10-16
				

			

		

		

			
				
今天小编就为大家分享一篇layui form.render('select', 'test2') 更新渲染的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	



		

			
		



	

		

			

				
					
select标签无法渲染，form.render()即使渲染成功也无法选择？

				
			

			

				

					java_csdnn的博客
				

				

					01-03
					
					3168
					
				

			

		

		

			
				
1.form.render()同样的手法，第二次没用了？点击select没有反应？2.form.render()渲染成功，无法选择select下的option？

			
		

	





	

		

			

				
					
layui 更新渲染部分元素 form.render(‘select‘, ‘test2‘)

				
			

			

				

					weixin_43802567的博客
				

				

					02-26
					
					1417
					
				

			

		

		

			
				
1、要加这个样式：class="layui-form"2、要加这个属性：lay-filter="test2"3、样式和属性不能加到本身控件中,就像下面的错误做法。

			
		

	





	

		

			

				
					
jQuery选中select控件 无法设置selected的解决方法

				
			

			

				

					10-28
				

			

		

		

			
				
当使用jQuery的`selected`属性动态设置option的选中状态时，IE6可能还没有准备好接受这个改变，从而导致“无法设置selected属性，未指明的错误”。  解决这个问题的一个常见策略是将设置selected属性的代码延迟到...

			
		

	





	

		

			

				
					
jQuery操作select下拉框的text值和value值的方法

				
			

			

				

					12-08
				

			

		

		

			
				
1、jquery获取当前选中select的text值 var checkText=$(“#slc1”).find(“option:selected”).text(); 2、jquery获取当前选中select的value值 var checkValue=$(“#slc1”).val(); 3、jquery获取当前选中select的...

			
		

	





	

		

			

				
					
js动态设置select下拉菜单的默认选中项实例

				
			

			

				

					12-02
				

			

		

		

			
				
本文将详细介绍如何使用JavaScript动态地设置SELECT下拉菜单的默认选中项，通过一个实际的代码示例进行解析。  首先，我们需要理解HTML中的SELECT元素和OPTION元素。SELECT元素用于创建一个下拉菜单，而OPTION元素则...

			
		

	





	

		

			

				
					
js实现Select下拉框具有输入功能的方法

				
			

			

				

					10-24
				

			

		

		

			
				
然而，在一些应用场景中，用户可能希望直接输入数据而非从下拉列表中选择，这时就需要给Select下拉框增加输入功能。  实现Select下拉框输入功能的常见方法主要有两种，一种是通过HTML和CSS实现，另一种则利用...

			
		

	





	

		

			

				
					
layui form.render(‘select’, ‘test2’) 更新渲染的方法

				
			

			

				

					01-19
				

			

		

		

			
				
如下所示：


 …


 …

【JavaScript】
form.render(null, 'test1'); //更新 lay-filter=test1 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter=test2 所在容器内的全部 select 状态
//……

重点：
<div class=”layui-form

			
		

	





	

		

			

				
					
解决option标签selected=”selected”属性失效的问题

				
			

			

				

					11-29
				

			

		

		

			
				
要在select标签上面加上autocomplete=”off”关闭自动完成，不然浏览器每次刷新后将自动选择上一次关闭时的option，这样默认属性selected=”selected”就会失效啦
要记住每次遇到select标签时就最好要加上autocomplete=”off”这一项
以上这篇解决option标签selected=”selected”属性失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

			
		

	





	

		

			

				
					
layui form.render(‘select‘, ‘test2‘) 更新渲染

				
			

			

				

					amberom的专栏
				

				

					03-07
					
					782
					
				

			

		

		

			
				
办理细类

			
		

	





	

		

			

				
					
layui select form.render(‘select‘) 只触发二次，之后不会触发改变值

				
			

			

				

					Dxiaoqi
				

				

					09-01
					
					707
					
				

			

		

		

			
				
错误代码


$("#xxx option[value='1']").attr("selected","selected");

以上写法只会触发一次，之后再次改变页面不会更改，应改为以下写法

正确代码


$("#xxxoption[value='1']").prop("selected",true);

//prop使用于固定属性，selected就是select下拉框的固定属性。

//attr适用于自定义属性
...

			
		

	





	

		

			

				
					
form.render('select') 更新渲染问题

				
			

			

				

					智行晓东的博客
				

				

					07-29
					
					1万+
					
				

			

		

		

			
				
最近在做项目的时候用到selectN，发现我在ajax动态动态渲染的时候页面不变，找了好久才发现问题所在

看了fly社区的案例是用的 layui.form('select').render(); 这个是可以只刷新你动态更新的那部分select


    //渲染表单
    layui.use(['form'], function(){
        var form = layui.for...

			
		

	





	

		

			

				
					
动态加载select后form.render()方法不管用

				
			

			

				

					qq_42310995的博客
				

				

					05-25
					
					1万+
					
				

			

		

		

			
				
select里option是js里面页面加载完后执行方法里初始化的.发现form.render()，无法重置select（只对页面内部非js中生成的option有效）加了两句如下图红色框内，问题解决。。。...

			
		

	





	

		

			

				
					
option标签selected="selected"属性失效的问题

				
			

			

				

					weixin_30897233的博客
				

				

					11-04
					
					486
					
				

			

		

		

			
				
要在select标签上面加上autocomplete="off"关闭自动完成，不然浏览器每次刷新后将自动选择上一次关闭时的option，这样默认属性selected="selected"就会失效啦

要记住每次遇到select标签时就最好要加上autocomplete="off"这一项
转载于:https://www.cnblogs.com/ppphs/p/7782863.html...

			
		

	





	

		

			

				
					
HTML中select的option设置selected="selected"无效的解决方案

					
热门推荐

				
			

			

				

					黄绍添的个人博客
				

				

					10-17
					
					2万+
					
				

			

		

		

			
				
今天遇到了一个奇葩问题，写HTML时有个select控件，通过设置option的selected="selected"居然无效，但是在其他浏览器是可以的，问了一下Google大神，说要在select标签加上autocomplete="off"，如：

    是
    否




这样就OK了！

			
		

	





	

		

			

				
					
HTML中select的option设置selected="selected"无效的解决方式

				
			

			

				

					aoe41606的博客
				

				

					07-03
					
					1056
					
				

			

		

		

			
				
今天遇到了一个奇葩问题，写HTML时有个select控件。通过设置option的selected="selected"竟然无效，可是在其它浏览器是能够的。问了一下Google大神，说要在select标签加上autocomplete="off"，如：
<select autocomplete="off">
 <option>是</option...

			
		

	





	

		

			

				
					
el-select下拉框option加点击事件不生效

					
最新发布

				
			

			

				

					12-31
				

			

		

		

			
				
对于 `element-ui` 中的 `el-select` 和 `el-option` 组件，在尝试为 `el-option` 添加点击事件时，默认情况下直接使用 `@click` 并不会生效。这是因为 `el-option` 的渲染机制以及其内部处理逻辑所致。  为了使点击...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值