html option selected 无效,HTML option 标签的 selected 属性

HTML option 标签的 selected 属性

http://www.w3school.com.cn/tags/att_option_selected.asp

1、一般做WEB的时候，Chrome的兼容性会比较好，但是这里有个特殊的情况，下面的方法，Chrome会有问题。

Chrome版本：版本67.0.3371.0(正式版本) (32 位)

效果图

这里写图片描述

反例如下：(Chrome连续点击resetOption、setOption、resetOption、setOption就会出现问题)

//取消选中

function resetOption(id) {

$('#' + id).find("option").each(function() {

$(this).removeAttr("selected");

});

}

// 选中。这里强调的是：Chrome的BUG(版本67.0.3371.0(正式版本) (32 位))

function setOption(id, optionID) {

if (optionID == null) {

return;

}

$('#' + id).find("option").each(function() {

if ($(this).val() == optionID) {

$(this).attr("selected", "selected");

}

});

}

Volvo

Saab

Mercedes

Audi

resetOption

setOption

正例，推荐以下方法：

//取消选中

function resetOption(id) {

$('#' + id).find("option").each(function() {

$(this).removeAttr("selected");

});

}

// 选中。--------------------------这部分代码不同

function setOption(selectID) {

var data = [ {

id : '0',

name : ''

}, {

id : '1',

name : 'Volvo'

}, {

id : '2',

name : 'Saab'

}, {

id : '3',

name : 'Mercedes'

}, {

id : '4',

name : www.douniu157.com'Audi'

} ];

// default value

var id = 'id';

var name = www.thd580.com'name';

// empty value

var option = '';

// other value

for ( var i in data) {

if (selectID != undefined && data[i][id] == selectID) {

option += '' + data[i][name] + '';

continue;

}

option += 'www.thd580.com' + data[i][name] + '';

}

$('#selectID').html(option);

}

www.douniu178.com

Volvo

Saab

Mercedes

Audi

resetOption

setOption

2、测试地址(把上面的代码贴进去，提交代码，右侧就会出现效果)

http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide

关于option标签的selected属性

当item的dict_id和custSource一样,那么当前的item的name就被选中并显示在页面 如果直接写selected="selected",就等于直接回显这个集合中最 ...

<option> 标签的 value 属性

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

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

使用原生JavaScript实现对select增加option标签并附加value属性

好久没有写原生的东西了,今天写了一个小项目里面包含着option选项,所以我决定使用原生JavaScript动态生成, 本着互联网分享精神,我将本篇文章分享给大家. html代码(就是一个select ...

html select与option标签

1.select 元素 select 元素可创建单选或多选菜单. 元素中的  标签用于定义列表中的可用选项 常用属性如下: autofocus: ...

让 select 的 option 标签支持事件监听(如复制操作)

这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

JS组件系列——使用HTML标签的data属性初始化JS组件

前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

随机推荐

BizTalk开发系列(二十七) 异常管理中的数据编码

在BizTalk的异常管理解决方案中.大部分是通过订阅相关的升级属性来接收消息,并在自定义的流程或发送端口进行处理.但不管怎样,一般会定义统一的 错误消息Schema,这样不仅可以让我们通过异常信息快 ...

jackson 注脚学习参考

(1)初级我们从几个简单的使用场景开始:重命名属性,忽略属性,以及修改属性所使用的类型.注意:下面的例子仅仅显示了成员属性(field properties),注解同样也可以用在成员方法(getter ...

javascript事件机制

① javascript绑定事件的方式 http://blog.iderzheng.com/dom-javascript-event-binding-comparison/ ② javascript事 ...

CodeForces 546C(队列)

CodeForces 546C Soldier and Cards Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I ...

Tiny6410之控制icache驱动

什么是cache:    基于程序访问的局限性,在主存和CPU通用寄存器之间设置了一类高速的.容量较小的存储器,把正在执行的指令地址附件的一部分指令或数据从主存调入这类存储器,供CPU 在一段时间内使 ...

java 类与对象

class XiyoujiRenwu { float height,weight; String head, ear; void speak(String s) { System.out.printl ...

如何在本地测试Fabric Code

前一篇博客讲到了如何编译本地的Fabric Code成镜像文件,那么如果我们想改Fabric源代码,实现一些Fabric官方并没有提供的功能,该怎么办呢?这时我们除了改源码,增加需要的功能外,还需要能 ...

vue2组件懒加载浅析

vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

HttpContextAccessor不会出现线程同步问题？

我有一段比较常规的.net core mvc代码,就是StartUp函数中注册HttpContextAccessor到系统DI工厂中,如图: 然后调用方是service层,这个service层是使用a ...

centos内存自动清理脚本及限制tomcat内存占用

使用crontab定时每天自动清理系统内存 00 00 * * * /root/Cached.sh [root@localhost ~]# cat Cachec.sh #! /bin/bash# ca ...