selected多次点击不生效

最新推荐文章于 2023-03-14 15:20:10 发布
转载 最新推荐文章于 2023-03-14 15:20:10 发布 · 377 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/cheng6018/p/8516292.html
文章标签：

#java

本文探讨了在不刷新页面的情况下，使用selected属性设置表单下拉选项为选中状态时遇到的问题及解决方案。通过添加autocomplete=off属性和使用jQuery的.prop()方法，确保了selected属性在多次操作后仍然有效。

表单下拉选项使用selected设置选中时，发现第一次默认选中成功，在页面不刷新的情况下操作（比如ajax），虽然selected属性设置了，但是默认选中不生效。

解决办法1

可能是浏览器缓存问题，在HTML中给标签加上autocomplete="off"属性

解决办法2

jQuery中添加selected属性使用.prop("selected",true)进行添加。

错误操作：用attr $("#is_open").find("option[value = '"+is_open+"']").attr("selected",true);此时操作后，F12有明显的调试信息，但是多次操作后selectes不生效

正确操作：用prop $("#is_open").find("option[value = '"+is_open+"']").prop("selected",true)

此时F12调试信息看不出已经选择，但是页面显示数据是正确的，而且不怕多次操作。

因为attr多用于自定义标签

转载于:https://www.cnblogs.com/cheng6018/p/8516292.html

Flutter 中 IconButton 点击效果未生效
chiceT的博客
07-19 4460
Flutter 出了有段时间了，也在逐渐迭代版本，当然坑也都是逐渐踩出来的 今天来聊个IconButton 点击效果(水波纹)丢失的问题，其他带水波纹效果的同理。 当你兴致冲冲的撸了一段代码，比如这样的 咱们先忽略为啥不用自带的效果啥的，就是想自己造(练)轮(代)子(码)，结构简单嘛，按照 Flutter 的思路一层一层套，Container啊、Stack啊、Text啊、IconButton啊…...
Android ColorStateList 设置同时处于两个状态的颜色不生效
mg2flyingff的博客
02-03 975
ColorStateList 允许我们根据View的不同状态为View设置不同的颜色，比如TextView在按压态、选中态、禁用态等状态的背景颜色。创建方式有两种：XML静态定义和java代码动态创建 XML 静态定义和使用 创建color类型的xml资源文件，然后在布局的xml文件中引用该颜色资源文件即可 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com
解决option标签selected="selected"属性失效的问题
08-28
下面小编就为大家带来一篇解决option标签selected="selected"属性失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望对大家有所帮助
jquery动态设置selected不生效
yanhappiness
03-14 541
必须使用prop，不能使用attr属性否则不能成功。对于这种像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
JS函数select()无法调用
aaa1117a8w5s6d的专栏
12-17 3603
function select(){     alert("haha"); } 写了上面一段测试代码，发现JS不能用select命名，否则无法调用。
jquery设置下拉框selected不起作用
E_mi_ly的专栏
08-30 4948
内容转载来自：http://blog.youkuaiyun.com/caixiajia/article/details/52912387 在js中设置下拉框被选中： 最初写法： //移出selected $("#selected option").removeAttr("selected"); //将value值为value的设为selected $("#selected"
select下拉菜单默认选中selected属性不起作用
胡兜兜的博客
12-28 3967
select下拉菜单默认选中selected属性失效
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
10-21
下面是一个使用`prop()`方法来解决反复调用attr()只生效一次的问题的示例代码： ```javascript // 定义全选函数 function checkAll() { $("input[name=ids]").prop("checked", true); } // 定义全不选函数 ...
Android中Spinner控件关于二次点击同一item无响应事件解析及处理方法
冷雨未温的博客
05-27 5028
分析 在Android开发中难免会使用到Spinner控件，而且经常会对其绑定点击事件。下面就从源码上来解析下为什么Spinner不对同一item二次点击进行事件响应。 我们从Spinner的事件入手，我们来看以下几个事件绑定，首先是Spinner本身的 /** * <p>A spinner does not support item click events. Calling t
我想要的是不改变我页面的东西只加上第一次点击就能修改值
最新发布
12-10
### 问题本质：为什么“第一次点击不能修改值”？ 即使你写了： ```csharp item.IsSelected = true; item.Focus(); e.Handled = true; ``` 但在 WPF 中： - 如果 `ListViewItem` 的 `ControlTemplate` 包含 `...
layui选择框赋值不显示_layui 动态给select赋值，页面不生效
weixin_39818662的博客
12-21 2508
2019年08月02日 13:23:09被提需求：查询后 重置条件区域所以写代码table.reload('exhibitor', {page: {curr: 1 //重新从第 1 页开始},where: {keyword: $("input[name='keyword']").val(),is_reg: $("select[name='is_reg']").val(),}});//重置搜索条件$...
IE6报"无法设置selected属性。无效索引。"
leeafu的专栏
09-05 2136
转自：http://blog.youkuaiyun.com/huigoo/article/details/7491586 由于下拉列表涉及到级联操作，所以准备将option的值通过$('el').html()设置进去，然后设置相应的值，在IE8、FF、Chrome下均没错误，IE6.0出现无法设置问题，报错"无法设置selected属性。无效索引。"，如下图 遂开始在IE6下艰苦调试，发现
select下拉框默认选中selected属性不起作用
热门推荐
tomorrownan的博客
11-05 2万+
问题: 问题：使用select写的下拉菜单对默认选选中的option项设置selected=&quot;selected&quot;属性，不起作用，没有实现默认选中。 分析： 分析：使用谷歌浏览器打开页面时，selected=&quot;selected&quot;默认选中事件有效。当使用火狐浏览器打开刷新页面后显示的是上一次关闭时选中的option选项，默认选中属性selected=&quot;selected&quot;失效。
EasyExcel导入导出下载模板（带下拉）
琴韵
03-22 6989
EasyExcel导入导出网上资料很多，这里就不多做描述了，总之就是一款比较轻而小，易用的excel操作工具包；这里在项目中使用到，做下笔记。以及表格中下拉框的实现； 声明：本文思路是借鉴于某大神的，然后自己进行二次改版而成的，用注解的方式来进行动态下拉列表的绑定。所以代码略微有点多。 还有另一种方式，则是将数据源传入进来直接进行绑定，这样可以做到真正的与业务分离，可以更加灵活。 EasyExcel导入 EasyExcel.read(file.getInputStream(), ImportSecurity
esayExcel自定义注解导出带下拉框
lxhJava15的博客
09-24 2224
esayExcel自定义注解导出带下拉框
select下拉框默认选中selected属性不起作用的解决方法 ligerui
hehuan的博客
08-21 3160
select下拉框默认选中selected属性不起作用 浏览器—360浏览器 系统—win10 框架—ligerui 原先代码: <td align="left" class="l-table-edit-td"> <select name="DEP_CAT" id="DEP_CAT"> <opti...
select设置 selected 没有生效的解决方法
空空的博客
04-18 7212
&lt;select class="span12" autocomplete="off"&gt; &lt;option data-nid="no" selected class="f_head"&gt;内容-通用&lt;/option&gt; &lt;option data-nid="no" class="f_head&quot
<select> onChange不生效
06-24
<think>我们正在解决FomanticUI中多选下拉菜单的onChange事件不触发的问题。根据用户描述，问题出现在设置了multiple属性的<select>元素上。下面将详细分析原因并提供解决方案。##问题分析在FomanticUI中，当使用多选下拉菜单（即设置了`multiple`属性）时，直接使用原生的`onchange`属性或通过jQuery的`.change()`绑定事件可能无效。这是因为FomanticUI使用自己的事件系统来管理下拉菜单的状态。##正确绑定onChange事件的方法必须通过FomanticUI的初始化配置来设置`onChange`回调函数。###完整示例代码```html<!--HTML结构--><selectclass="uifluiddropdown"multiple><optionvalue="">选择技能</option><optionvalue="html">HTML</option><optionvalue="css">CSS</option><optionvalue="javascript">JavaScript</option></select><script>//初始化下拉菜单并绑定onChange事件$('.ui.dropdown').dropdown({onChange:function(value,text,$selectedItem){//多选模式下value是数组（即使只选一个也是数组）console.log('当前选中的值:',value);console.log('当前选中的文本:',text);console.log('选中的DOM元素（多选时是数组）:',$selectedItem);}});</script>```###关键点说明1.**多选模式下的参数特点**：-`value`：总是数组类型，包含所有选中项的value值（例如：`['html','css']`）-`text`：总是数组类型，包含所有选中项的文本（例如：`['HTML','CSS']`）-`$selectedItem`：jQuery对象数组，包含所有选中的选项元素2.**事件触发时机**：-当选择发生改变时（增加或减少选择项）-通过代码调用`$('.dropdown').dropdown('setselected',values)`也会触发##常见错误及修复###错误1：使用原生onchange属性```html<!--错误示例：这样绑定不会触发--><selectclass="uidropdown"multipleonchange="console.log('changed')">```**修复**：必须通过初始化配置设置回调函数。###错误2：通过jQuery绑定change事件```javascript//错误示例：这样绑定的事件不会触发$('select').change(function(){console.log($(this).val());});```**修复**：使用FomanticUI提供的`onChange`回调。###错误3：在初始化之前绑定事件```javascript//错误示例：事件绑定在初始化之前$('select').on('change',handler);$('.ui.dropdown').dropdown();```**修复**：无需单独绑定，直接在初始化配置中设置。##获取当前选中值的方法在事件外部获取值：```javascript//获取当前选中的所有值（数组）constvalues=$('.ui.dropdown').dropdown('getvalue');console.log(values);//例如：['html','css']//获取当前选中的所有文本（数组）consttexts=$('.ui.dropdown').dropdown('gettext');console.log(texts);//例如：['HTML','CSS']```##动态修改选项后刷新如果动态添加/删除选项，需要刷新组件：```javascript//添加新选项$('select').append('<optionvalue="vue">Vue.js</option>');//刷新下拉菜单$('.ui.dropdown').dropdown('refresh');```##服务器端取值表单提交时，多选值会自动以数组形式传输（同名参数重复）：```skills=html&skills=css&skills=javascript```在服务器端按数组接收即可（如PHP的`$_POST['skills']`自动转为数组）。##注意事项1.**组件初始化**：确保在DOM加载完成后初始化```javascript$(document).ready(function(){$('.ui.dropdown').dropdown({/*配置*/});});```2.**多次初始化**：避免重复初始化同一个下拉菜单3.**事件冒泡**：FomanticUI的`onChange`已处理好事件冒泡，无需额外干预[^1]:FomanticUIDocumentation-Dropdown§§相关问题§§1.如何在FomanticUI下拉菜单中实现远程数据加载？2.FomanticUI下拉菜单的onChange事件如何阻止默认行为？3.如何自定义FomanticUI多选下拉菜单的选中项显示样式？4.FomanticUI下拉菜单在移动端无法滚动怎么办？5.如何重置FomanticUI下拉菜单的选择状态？</think>### 解决 Fomantic UI 多选下拉菜单 `onChange` 事件不触发的问题 在 Fomantic UI 中，当使用多选下拉菜单（带 `multiple` 属性）时，直接绑定原生 `onchange` 事件可能无效。这是因为 Fomantic UI 使用自己的事件系统管理下拉组件。以下是完整解决方案： #### 正确的事件绑定方法 ```html <select class="ui fluid dropdown" multiple> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option> </select> <script> // 初始化下拉菜单并绑定onChange回调 $('.ui.dropdown').dropdown({ onChange: function(value, text, $selectedItems) { // 多选模式下value是数组格式 console.log("选中的值:", value); console.log("选中的文本:", text); // 实际应用示例：更新隐藏字段 $('#selected-values').val(JSON.stringify(value)); } }); </script> <!-- 用于表单提交的隐藏字段 --> <input type="hidden" id="selected-values" name="selectedValues"> ``` #### 关键点说明 1. **参数特点（多选模式）**： - `value`: 总是返回数组格式 `["html", "css"]` - `text`: 返回选中项的文本数组 `["HTML", "CSS"]` - `$selectedItems`: jQuery 对象包含所有选中元素 2. **事件触发时机**： - 添加/移除选项时立即触发 - 通过代码设置选中状态时也会触发 #### 常见错误修复 **错误1：使用原生 onchange 属性** ```html <!-- 错误示例：不会触发 --> <select multiple onchange="handleChange()"> ``` **修复**：使用 Fomantic UI 的初始化配置 **错误2：通过 jQuery 绑定 change 事件** ```javascript // 错误示例：不会触发 $('select').on('change', function() { ... }); ``` **修复**：使用 `dropdown({ onChange: ... })` 配置 **错误3：尝试获取错误的值** ```javascript // 错误：返回空字符串 const wrongValue = $('select').val(); // 正确：使用Fomantic API const correctValues = $('.ui.dropdown').dropdown('get value'); // 返回数组 ``` #### 动态操作下拉菜单 ```javascript // 添加新选项 $('select').append('<option value="vue">Vue.js</option>'); // 刷新下拉组件（必须步骤） $('.ui.dropdown').dropdown('refresh'); // 设置选中状态（会触发onChange） $('.ui.dropdown').dropdown('set selected', ['html', 'vue']); // 获取当前选中值（数组格式） const currentValues = $('.ui.dropdown').dropdown('get value'); ``` #### 服务器端处理 表单提交时，数据会以数组形式传输： ```http POST /submit-form selectedValues[]=html&selectedValues[]=css ``` PHP 处理示例： ```php $values = $_POST['selectedValues']; // 自动转为数组 echo implode(', ', $values); // 输出: html, css ``` #### 特殊场景：单选/多选通用解决方案 ```javascript $('.ui.dropdown').dropdown({ onChange: function(value) { // 统一处理：始终转为数组 const values = Array.isArray(value) ? value : [value]; console.log("统一格式的值:", values); } }); ``` [^1]: Fomantic UI 文档 - Dropdown 事件
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值