表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效

在手机端有些浏览器用jQuery的attr()方法设置selected无效。

研究发现是浏览器兼容的问题

一,解决浏览器缓存问题,在HTML中给<select>标签加上autocomplete="off"属性

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

attr 与 prop的区别

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。

关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

上面的描述也许有点模糊,举几个例子就知道了。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

再举一个例子:

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

用jQuery的attr()设置option默认选中无效的解决 attr设置属性失效的更多相关文章

  1. iview 酸爽debug: subMenu默认选中无效的解决方法

    一. 在iview中写一个submenu <Col span="3" type="flex" v-if="showCids"> ...

  2. jQuery 根据value设置radio默认选中

    jQuery 根据value设置radio默认选中:HTML: <input type="radio" name="type" value="1 ...

  3. 极光推送设置标签和别名无效的解决办法:JPush设置别名不走成功回调

    极光推送设置标签和别名无效的解决办法 JPush设置别名不走成功回调的解决办法 http://www.cnblogs.com/chenqitao/p/5506023.html 主要是网络加载过快导致的 ...

  4. jQuery 设置select默认选中问题

    在进行其他操作后,恢复select默认选中 html代码: <select id="shai" style="width:150px;margin:5px 50px ...

  5. js中的new Option默认选中

    new Option("文本","值",true,true).后面两个true分别表示默认被选中和有效! //js默认选中 var sel = document ...

  6. jQuery实现下拉框默认选中

    <form class="form-inline" method="post" action="/score_result/"> ...

  7. Vue 中select option默认选中的处理方法

    在做泰康项目的时候有个需求就是要给select默认选中的样式我的处理方法有两个 1.直接将默认值给  selectedOption <select v-model="selectedO ...

  8. freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式

    今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...

  9. WPF ComboBox 默认选中无效

    在WPF开发当中,我发现ComboBox的默认选中逻辑失效了,仔细查找后发现后台逻辑并没有出现问题. 测试后发现在XAML中,ComBoBox控件的SelectedValue属性需要写在ItemSou ...

随机推荐

  1. locationInView和translationInView的区别

      1  translationInView是UIPanGestureRecognizer下面的一个属性 locationInView则是UIGestureRecognizer下面的属性 2  tra ...

  2. [转载]mac下查看.mobileprovision文件及钥匙串中证书.cer文件

    一. mobileprovision文件查看 xxx.mobileprovision是ios开发中的设备描述文件,里面有证书信息.调试设备的UUID信息.bundle identifier等,此文件是 ...

  3. CCNA2.0笔记_安全管理设备

    设备安全 配置Console密码 Switch(config)#line console 0 Switch(config-line)#login Switch(config-line)#passwor ...

  4. 清理iOS中的“其他”空间垃圾文件

    关于如何清理 iOS 里的"其他"空间的教程,网上搜索那是一大堆,不过都是对于2010年某坛某篇"技术文"的无数次简单复制粘帖,可行性已经被各路尝试者们踩到了地 ...

  5. DMA—直接存储区访问

    本章参考资料:< STM32F4xx 中文参考手册> DMA 控制器章节.学习本章时,配合< STM32F4xx 中文参考手册> DMA 控制器章节一起阅读,效果会更佳,特别是 ...

  6. 1. DataBinding - offical tutorial

    1. DataBinding - offical tutorial android DataBinding tutorial 构建环境 数据与布局文件的绑定 data binding 表达式 数据对象 ...

  7. hadoop本地化运行

    mr的三种运行方式 第一种,打成jar包,在hadoop上运行 第二种,driver端在本地,通过ide连接linux上的hdfs 第三种,windows本地运行 hadoop_dll2.6.0_64 ...

  8. 卧槽! JavaScript JVM运行Java!!

    由于任何计算机语言都具有巨大的灵活性,软件世界变得有点疯狂.一旦你已经吸收了用这种语言编写的编译器的想法,那么它会编译还有什么可以留下来的?但是......用JavaScript编写的Java虚拟机J ...

  9. java 获取服务器时间同步本地计算机时间

    http://hi.baidu.com/captives/item/25c8b80170a9b0ccf45ba6f8 ————————————————————————————————————————— ...

  10. YUV转为RGB24及IplImage格式(I420和YV12)及Java版实现

    http://blog.csdn.net/xy365/article/details/18735849 ———————————————————————————————————————————————— ...