动态给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++) {
$(

			
		

	



              


  
              

                


	

		

			

				
					
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、样式和属性不能加到本身控件中,就像下面的错误做法。

			
		

	



		

			
		



	

		

			

				
					
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适用于自定义属性
...

			
		

	





	

		

			

				
					
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()下拉框和单选以及复选框不出来的问题

				
			

			

				

					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') 更新渲染的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
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”属性失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

			
		

	





	

		

			

				
					
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
				

			

		

		

			
				
### 解决 `el-select` 下拉框中 `el-option` 点击事件不触发的问题

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

为了使点击事件能够正常工作，应当采用 `@click.native` 来绑定事件处理器[^1]：

```html
<template>
  <div>
    <el-select v-model="selectedValue">
      <el-option 
        v-for="(item, index) in options"
        :key="index"
        :label="item.label"
        :value="item.value"
        @click.native="handleOptionClick(item)"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: '黄金糕' },
        { value: 'option2', label: '双皮奶' }
      ]
    };
  },
  methods: {
    handleOptionClick(option) {
      console.log('Selected Option:', option);
      // 可在此处执行其他操作，比如更新关联的选择框数据源或设置输入框默认值
    }
  }
};
</script>
```

上述代码展示了如何利用 `@click.native` 实现当用户点击特定选项时调用自定义的方法并传递所选项目作为参数。这种方法不仅解决了点击事件无法触发的问题，还允许开发者根据实际业务需求灵活地响应用户的交互行为[^3]。

此外，如果遇到两个相互依赖的 `select` 控件场景——即一个控件的选择会影响另一个控件的内容，则可以在 `handleOptionClick()` 方法内动态调整第二个 `select` 的数据源数组[^2]。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值