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

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

 <select class="sel" name="">

     <option value="1">one</option>

     <option value="2">two</option>

     <option value="3">three</option>

     <option value="4">four</option>

     <option value="5">five</option>

     <option value="6">six</option>

 </select>

大家基本上都是这样的， 然后两种操作，一种是让用户自己选择，然后获取选中的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端。

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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

     </head>

     <body>

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

         <select class="sel" name="">

             <option value="1">one</option>

             <option value="2">two</option>

             <option value="3">three</option>

             <option value="4">four</option>

             <option value="5">five</option>

             <option value="6">six</option>

         </select>

         <button class="button1">让第六个选中</button>

     </body>

     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

     <script type="text/javascript">

         $(".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());

                 }

             })

         })

     </script>

 </html>

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

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

select设置text的值选中（兼容ios和Android）基于jquery的更多相关文章

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

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

  2. 兼容ios和Android的复制js代码

    //2种方法本人全部亲测有效 方法1:比较简单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  3. js的new Date兼容iOS和Android

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

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

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

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

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

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

    11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...

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

    比如 <select class="selector"> <option value ="volvo">Volvo</option ...

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

    <select name="streetid" id="streetid"> <option value="4">北 ...

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

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

随机推荐

  1. linux根目录下的各文件夹含义说明

    在早期的 UNIX 系统中,各个厂家各自定义了自己的 UNIX 系统文件目录,比较混乱. Linux 面世不久后,对文件目录进行了标准化,于1994年对根文件目录做了统一的规范, 推出 FHS ( F ...

  2. PHP学习笔记 01 之表单传值

    一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...

  3. happyChat开发系列：使用websocket.io实现双向通信的乐聊大前端开发

    一.前言 乐聊是一个自己用websocket写一个完整的应用,虽然功能比较欠缺,但是实现了基本的文字聊天,以及群聊,私聊,机器人聊天等功能.因为这个自己做了PC端,无线端(手机端),以及使用cordo ...

  4. Docker入门学习

    Python爬虫 最近断断续续的写了几篇Python的学习心得,由于有开发经验的同学来说上手还是比较容易,而且Python提供了强大的第三方库,做一个小的示例程序还是比较简单,这不我之前就是针对Pyt ...

  5. MTCNN算法与代码理解—人脸检测和人脸对齐联合学习

    目录 写在前面 算法Pipeline详解 如何训练 损失函数 训练数据准备 多任务学习与在线困难样本挖掘 预测过程 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 主 ...

  6. [翻译 EF Core in Action 2.1] 设置一个图书销售网站的场景

    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...

  7. 女朋友也能看懂的Zookeeper分布式锁原理

      前言 关于分布式锁,在互联网行业的使用场景还是比较多的,比如电商的库存扣减,秒杀活动,集群定时任务执行等需要进程互斥的场景.而实现分布式锁的手段也很多,大家比较常见的就是redis跟zookeep ...

  8. .NET（C#、VB）APP开发——Smobiler平台控件介绍：SliderView控件

    SliderView控件 一.          样式一 我们要实现上图中的效果,需要如下的操作: 从工具栏上的“Smobiler Components”拖动一个SliderView控件到窗体界面上 ...

  9. 提升机器学习数学基础，这7本书一定要读-附pdf资源

    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 来源 | KDnuggets 作者 | Ajit Jaokar 转自 | 新智元 编辑 | 大明 [编 ...

  10. DataPipeline | PayPal庞姬桦：大数据在小微企业贷款上的运用

    庞姬桦女士毕业于北京大学和美国哥伦比亚大学,目前担任PayPal公司消费者风险管理总监,负责通过大数据实现对互联网金融风险的侦测.跟踪.管控和防范.在加入PayPal之前,曾任职于渣打银行(中国)和美 ...