前一段时间改了一个bug，是因为select引起的。当时我没有仔细看，只是把bug改完了就完事了，今天来总结一下。

首先说option中我们通常会设置value的属性的，还有就是text值的，请参见下面的HTML代码：

one

two

three

four

five

six

大家基本上都是这样的， 然后两种操作，一种是让用户自己选择，然后获取选中的value值，或者是里面的text值。当然了，大部分都是value，取到，然后传给后台就可以了。这个基本上是没有难度的。请看下面的js代码：

$(".sel").change(function(){

var val = $(this).val();

alert(val);

var text1 = $(this).find("option:selected").text();

alert(text1);

})

这里就不详情的讲了。在ios和安卓上面也是没有问题的。

最主要的问题出在了设置的时候，如果后台给出的value的值的话，我其实我们设置也是比较简单的。直接使用$(".sel").val("值")；就可以了。但是难就难在了如果和后台是给的我们text 的值的话，设置起来就稍微的麻烦了。

然后我就去百度了，搜索到了很多文章，其中包括咱们博客园的，都是使用的这种方法：

$(".sel").find("option:contains('six')").attr("selected",true);

其中的“six”假设是后台传给前端的需要选中的值。这种办法，在电脑上和Android上面表现是正常的，但是在ios端是不可以的。这种办法并不能使用。究其原因就是因为ios端是不让设置的，只能通过val才能改变其中的值。所以就有了下面的方法：

$(".sel option").each(function(i,item){

if("six" == $(item).text()){

$(".sel").val($(item).val());

}

})

相信大家也能看懂，就是利用循环，把这个select标签下的，所有的option循环起来。找到了对应的项，然后获取到相应的val，然后在去设置val的值，让该选中的项选中。这种办法亲测，可以兼容ios端。

最后附上所有的代码，可以直接粘贴到编辑器自己测试。

为了测试selsect的选择，并且测试ios和Android是不是有兼容问题！

one

two

three

four

five

six

让第六个选中

$(".sel").change(function(){

var val = $(this).val();

alert(val);

var text1 = $(this).find("option:selected").text();

alert(text1);

})

$(".button1").on("click",function(){

//$(".sel").find("option:contains('six')").attr("selected",true);

$(".sel option").each(function(i,item){

if("six" == $(item).text()){

$(".sel").val($(item).val());

}

})

})

(其中的29行就是原来的写法，并不能兼容ios，大家可以自己测试。)

如果大家有什么好的办法，也欢迎大家在评论区留言。谢谢~

利用React Native 从0到1 开发一款兼容IOS和android的APP(仿造京东)

最近有一部电视剧叫做里面有个男猪脚,人们都叫他大神~我觉得吧~大神是相对的~所以~啥事都得谦虚! 好了 今天介绍的是如何从0到1利用React Native开发一款兼容I ...

兼容ios和Android的复制js代码

//2种方法本人全部亲测有效 方法1:比较简单 ..

js的new Date兼容iOS和Android

在写一个移动端的报名活动页面时,其中一个逻辑是:过了报名日期,“立即报名”按钮置灰,不允许报名:具体逻辑如下,在真机上测试的时候,Android端可以把按钮失效,iOS则是无法把按钮失效.后台返回的时 ...

打开页面默认弹出软键盘，同时兼容iOS和Android

// 示例1 open_soft_keyboard({ input: "#username" }); // 示例2 open_soft_keyboard({ input: 'inp ...

JavaScript调用App原生代码(iOS、Android)通用解决方案

实际场景 场景:现在有一个H5活动页面,上面有一个登陆按钮,要求点击登陆按钮以后,唤出App内部的登录界面,当登录成功以后将用户的手机号返回给H5页面,显示出来.这个场景应该算是比较完整的一次H5中的 ...

radio，checkbox，select，input text获取值，设置哪个默认选中

11

jquery操作select(option)的取值,设置和选中

比如 Volvo

Jquery设置select控件指定text的值为选中项

北 ...

使用val()另一个妙用------选中select/checkbox/radio的值

一直认为val()方法只有两个功能:1.能设置元素的值,2.获取元素的值.知道val()方法还有另外一个妙用,就是它能使select(下拉列表框).checkbox(多选框)和radio(单选框)相应 ...

随机推荐

微博轻量级RPC框架Motan

Motan 是微博技术团队研发的基于 Java 的轻量级 RPC 框架,已在微博内部大规模应用多年,每天稳定支撑微博上亿次的内部调用.Motan 基于微博的高并发和高负载场景优化,成为一套简单.易用. ...

20161014006 DataGridView Combobox 数据绑定与传值

//Combobox        private void T_Form_CY_CBD_D_CurrentCellChanged(object sender, EventArgs e)        ...

查看运行的KVM的虚机

[root@ok Desktop]# cat demo.py #!/usr/bin/python import libvirt conn = libvirt.open("qemu:///sy ...

Lambda中的一些方法的总结

public List GetNameByIDList(List UserID) { var UserList = LoadRe ...

使用laravel 的artisan快速创建表

参考:使用laravel 的artisan快速创建表 字段类型参考链接: 结构生成器 版本: Laravel 4.2 1. 创建migrate 文件 php artisan migrate:make ...

[ZETCODE]wxWidgets教程一：介紹

本教程原文链接:http://zetcode.com/gui/wxwidgets/introduction/ 翻译:瓶哥 日期:2013年11月26日星期二 邮箱: 414236069@qq.com ...

oracle starup报错

今天在linux里面安装Oracle的时候出现一个报错,忽略报错安装之后,数据库启动的时候报错: 从网上找到的解决方法: 创建实例后,进入sqlplus启动报错: sqlplus / as sysdb ...

重新认识AWS

Amazon Web Services早期logo: 现在的logo: 一.背景Amazon Web Services,简称AWS.目前世界第一大云计算厂商,AWS 云在全球 18 个地理地区内运营着 ...

使用Ajax发送http请求(get&post请求)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...

scrapy面试一

1.动态加载又对及时性要求很高怎么处理? Selenium+Phantomjs 尽量不使用 sleep 而使用 WebDriverWait 2.分布式爬虫主要解决什么问题? (1)ip (2)带宽 ( ...