HTML option 标签的 selected 属性

最新推荐文章于 2023-06-04 15:09:25 发布
最新推荐文章于 2023-06-04 15:09:25 发布
阅读量557 收藏
点赞数
原文链接：http://www.cnblogs.com/qwangxiao/p/8666643.html
版权

　　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就会出现问题）
　　
　　<!DOCTYPE html>
　　
　　<html>
　　
　　<head>
　　
　　<script src="/jquery/jquery-1.11.1.min.js"></script>
　　
　　<script>
　　
　　//取消选中
　　
　　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");
　　
　　}
　　
　　});
　　
　　}
　　
　　</script>
　　
　　</head>
　　
　　<body>
　　
　　<div>
　　
　　<select id="selectID">
　　
　　<option value='0'></option>
　　
　　<option value='1'>Volvo</option>
　　
　　<option value='2' selected="selected">Saab</option>
　　
　　<option value='3'>Mercedes</option>
　　
　　<option value='4'>Audi</option>
　　
　　</select>
　　
　　<button type="button" onClick="resetOption('selectID')">resetOption</button>
　　
　　<button type="button" onClick="setOption('selectID', '1')">setOption</button>
　　
　　</div>
　　
　　</body>
　　
　　正例，推荐以下方法：
　　
　　<!DOCTYPE html>
　　
　　<html>
　　
　　<head>
　　
　　<script src="/jquery/jquery-1.11.1.min.js"></script>
　　
　　<script>
　　
　　//取消选中
　　
　　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 = '<option value="0"></option>';
　　
　　// other value
　　
　　for ( var i in data) {
　　
　　if (selectID != undefined && data[i][id] == selectID) {
　　
　　option += '<option value="' + data[i][id] + '" selected="selected" >' + data[i][name] + '</option>';
　　
　　continue;
　　
　　}
　　
　　option += 'www.thd580.com<option value="' + data[i][id] + '">' + data[i][name] + '</option>';
　　
　　}
　　
　　$('#selectID').html(option);
　　
　　}
　　
　　</script>
　　
　　</head>
　　
　　<body>
　　
　　<div>
　　
　　<select id="selectID">
　　
　　<option value='0'>www.douniu178.com </option>
　　
　　<option value='1'>Volvo</option>
　　
　　<option value='2' selected="selected">Saab</option>
　　
　　<option value='3'>Mercedes</option>
　　
　　<option value='4'>Audi</option>
　　
　　</select>
　　
　　<button type="button" onClick="resetOption('selectID')">resetOption</button>
　　
　　<button type="button" onClick="setOption('1')">setOption</button>
　　
　　</div>
　　
　　</body>
　　
　　</html>
　　
　　2、测试地址（把上面的代码贴进去，提交代码，右侧就会出现效果）
　　
　　http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide

转载于:https://www.cnblogs.com/qwangxiao/p/8666643.html

weixin_30247159
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html Select 使用selected属性设置默认选择项
09-28
Html Select 如何进行默认选择，只要给某个option 添加 selected = selected"属性就是默认选项，下面是示例，希望对大家有所帮助
关于option标签的selected属性
aier0323305的博客
01-15 1863
当item的dict_id和custSource一样，那么当前的item的name就被选中并显示在页面 如果直接写selected="selected"，就等于直接回显这个集合中最后一个数据，无论你选啥！！ 转载于:https://www.cnblogs.com/Booker808-java/p/8289066.html...
有关在html中修改select标签的option selected默认选中属性实现
热门推荐
pinyinshang的博客
04-12 9万+
着急想要解决办法的朋友可以直接看最后的内容：}一般我们使用select标签时大概都会使用到option标签来填充下拉框中的内容只有几个固定的内容写死在页面还好，可能是这样的： &lt;select name="type"type="text"&gt; &lt;option velue= ""&gt;type&lt;/opt...
html 选择列表框,列表框的selected属性
weixin_31910545的博客
06-03 2258
Φ是什么意思？读"fai".是直径的意思不？“Φ”是数学中表示圆的直径的希腊字母。 “Φ”是希腊字母中的一个,读作fai,其写法分为两种,大写:Φ,小写:φ,小写时左上角的弯是开口的;而用作列表框和组合框有没有select属性列表框有selected，表示是否选中：If List1.Selected(i) Then 组合框只允许选一个，没有select，Combo1.ListIndex即为当前选中...
javascript select option对象总结
习惯在马桶上思考
12-20 753
一基础理解: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在标签中创建一个或多个文本 //options是个数组,里面可以存放多个文本这样的标签 1:options[ ]数组的属性: length属性--------...
解决option标签selected="selected"属性失效的问题
08-28
当在`<option>`标签中添加这个属性时，例如`<option value="value1" selected="selected">Option1</option>`，浏览器会在页面加载时自动将这个选项设置为选中状态。这在创建默认选项或根据用户之前的选择恢复状态时...
解决option标签selected=”selected”属性失效的问题
11-29
对于`<select>`标签，如果浏览器开启了自动完成，它可能在页面加载时根据历史记录自动选择某个选项，从而覆盖了`selected`属性的设置。这便是导致`selected="selected"`属性失效的原因。 为了解决这个问题，我们...
HTML select option基础理解及使用
12-13
首先，`<select>`标签定义了一个选择框，而`<option>`标签则是选择框内的选项，每个`<option>`都有一个`value`属性用于存储值，以及一个可选的文本内容。 在JavaScript中，`<select>`元素的`options`属性是一个数组...
Html Select option 如何进行默认选择
12-12
当你需要在页面加载时预设一个选项为默认选中状态，你可以通过在相应的`<option>`标签中添加`selected`属性来实现。在提供的描述和代码示例中，我们看到如何设置"通过"为默认选中的选项。 首先，让我们深入了解一下...
html选择按钮selected,HTML Option defaultSelected用法及代码示例
weixin_35458961的博客
06-04 865
DOM选项defaultSelected属性用于返回所选属性的默认值。 HTML中的selected属性用于指定页面加载时默认应选择的选项。这是一个布尔属性。默认情况下，将显示具有所选属性的选项。用法:它用于返回属性。optionObject.defaultSelected返回值：它返回一个布尔值，该布尔值表示默认情况下是否选中了该选项。例：本示例说明了如何返回所选属性。DOM defaultS...
html option 按钮,HTML Option selected用法及代码示例
weixin_42548829的博客
06-29 710
HTML DOM中的Option selected属性用于设置或返回元素的选定状态的值。这是一个布尔属性。用法:它返回选定的属性。optionObject.selected它设置选定的属性。optionObject.selected = true|false属性值：它包含一个布尔值，该布尔值指定是否选择该选项。true:它指定选择的选项。false:它具有默认值。将不会选择一个选项。返回值：它返回...
html option selected 无效,HTML option 标签的 selected 属性
weixin_32512381的博客
06-03 934
HTML option 标签的 selected 属性http://www.w3school.com.cn/tags/att_option_selected.asp1、一般做WEB的时候，Chrome的兼容性会比较好，但是这里有个特殊的情况，下面的方法，Chrome会有问题。Chrome版本：版本67.0.3371.0(正式版本) (32 位)效果图这里写图片描述反例如下：(Chrome连续点击r...
HTML中select的option设置selected="selected"无效解决
Leisurelyc的博客
05-05 2470
attr换成prop .prop("selected",true); .attr("selected","selected");
HTML 下拉框 select option 详解
3月3的风筝
02-20 5万+
一、基础理解:    var e = document.getElementById("selectId");    e. options= new Option("文本","值") ;    //创建一个option对象,即在标签中创建一个或多个文本    //options是个数组,里面可以存放多个文本这样的标签 1:options[ ]数组的属性:
使用prop和attr给option设置selected
PointerIsSoul的博客
09-23 1287
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 请输入你的爱好： <input type="text" /> <button>确定</button> <select> <option value="乒乓
获取option标签 并设置selected状态
hell_world!
03-28 2800
本文rt 11 22 默认是1为选中，即selected状态。 如果这里的select标签是一个外键的值    比方说 一个学生表  学生表里学院编号是外键   你查询学生后要显示   有的人是1号学院的 有的人是2号学院的 而默认是1号学院 用js来实现自动selected var v = document.form.select; for (var
「HTML和CSS入门指南」option 标签详解
最新发布
a451319296的博客
06-04 5077
option 标签是一个重要的标签，在 HTML 中用于创建下拉列表中的选项。使用 option 标签可以帮助您定义和呈现下拉列表中的各个选项。在使用 option 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能、验证表单数据，并避免大量选项问题。
OptionSet(静态属性集合)
Hello_World_daifage的博客
12-02 2011
struct YTMsgType: OptionSet {          public var rawValue: UInt          public static var text = YTMsgType(rawValue: 10)            public static var  img = YTMsgType(raw
html option效果,html:option
weixin_36310376的博客
06-03 400
注意事项:(1):In HTML the tag has no end tag.HTML中标签不需要关闭。In XHTML the tag must be properly closed.　在XHTML中标签必须合理关闭。在使用struts1中包含的下拉列表的标签包含:生成HTML元素:生成HTML元素:生成一组HTML元素生成一组HTML元素。其中生成HTML元素，表示下拉列表框或多选列表。...
php 动态添加<option>的属性selected
05-24
可以使用PHP的条件语句和HTML的select和option标签来实现动态添加<option>的属性selected。以下是一个示例代码： ```php <option value="apple" ($fruit == 'apple') echo 'selected' ?>>Apple</option> <option...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值