前一段时间改了一个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. ssm日期格式转换

    ssm日期格式转换 1      需求 前端传入字符串类型日期转化成java中的Date类型,存入数据库中;将数据库中的日期类型通过jstl标签在前端页面转换成字符串类型. 2      步骤 2.1 ...

  2. 使用NSSM把.Net Core部署至 Windows 服务

    为什么部署至Windows Services 在很多情况下,很少会把.Net Core项目部署至Windows服务中,特别是Asp.net Core就更少了.一般情况下,Asp.net Core会部署 ...

  3. TFS线上生成环境发布历程

    继前文 TFS在项目中Devops落地进程(上) TFS在项目中DevOps落地进程(下) 自从之前将开发环境使用TFS进行了自动化之后,就享受在此成果中,其他后续进度就停顿了好一段时间. 毕竟在我们 ...

  4. 游戏AI之感知（1）

    目录 感知 视觉感知 听力感知 其它感知 实现 感知 视觉感知 视觉感知是一种常见的感知. 在许多即时战略游戏或者类DOTA游戏里,一个单位的视觉感知往往是圆形范围的. 当然在其他大部分俯视角游戏里, ...

  5. SSM+Maven+MySQL实现简易的挂机修仙页游

    一段时间没有写过SSM的项目了,最近重新整合框架做了一个小Demo 学Java的萌新可以看一看:大佬呢,欢迎指出不足! 我一直钟爱挂机类游戏,同时也喜欢修仙和武侠小说,于是突发奇想,自己搞一个小游戏? ...

  6. arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）

    你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...

  7. 安卓开发笔记（二十二）：读取本地（内置）html文件并实现和Javascript交互

    实际上我们通常是使用WebView控件对本地html进行读取,这样就可以体会类似web app和安卓原生混合开发的乐趣了.在读取本地html并展示在前台的时候,并不需要在Androidmenifast ...

  8. java.lang.UnsatisfiedLinkError:dlopen failed: “**/*/arm/*.so” has unexpected e_machine: 3

    转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10458448.html 今天在做APP的时候使用so库,可结果一加载so库的时候便发生了这个莫名其妙的错 ...

  9. Redis内存模型(2)：存储细节

    1. 概述 先看一下执行set hellow world时,所涉及的数据模型: (1)dictEntry:Redis是Key-Value数据库,因此对每个键值对都会有一个dictEntry,里面存储了 ...

  10. LOJ #6050. 「雅礼集训 2017 Day11」TRI

    完全不会的数学神题,正解留着以后填坑 将一个口胡的部分分做法,我们考虑计算格点多边形(包括三角形)面积的皮克公式: \[S=a+\frac{1}{2}b-1\text({a为图形内部节点个数,b为边界 ...