select设置text的值选中(兼容ios和Android)基于jquery

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

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

1 <select class="sel" name="">
2     <option value="1">one</option>
3     <option value="2">two</option>
4     <option value="3">three</option>
5     <option value="4">four</option>
6     <option value="5">five</option>
7     <option value="6">six</option>
8 </select>

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

1 $(".sel").change(function(){
2     var val = $(this).val();
3     alert(val);
4     var text1 = $(this).find("option:selected").text();
5     alert(text1);
6 })

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

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

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

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

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

1 $(".sel option").each(function(i,item){
2     if("six" == $(item).text()){
3         $(".sel").val($(item).val());
4     }
5 })

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7     </head>
 8     <body>
 9         <h1>为了测试selsect的选择,并且测试ios和Android是不是有兼容问题!</h1>
10         <select class="sel" name="">
11             <option value="1">one</option>
12             <option value="2">two</option>
13             <option value="3">three</option>
14             <option value="4">four</option>
15             <option value="5">five</option>
16             <option value="6">six</option>
17         </select>
18         <button class="button1">让第六个选中</button>
19     </body>
20     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
21     <script type="text/javascript">
22         $(".sel").change(function(){
23             var val = $(this).val();
24             alert(val);
25             var text1 = $(this).find("option:selected").text();
26             alert(text1);
27         })
28         $(".button1").on("click",function(){
29             //$(".sel").find("option:contains(‘six‘)").attr("selected",true);
30             $(".sel option").each(function(i,item){
31                 if("six" == $(item).text()){
32                     $(".sel").val($(item).val());
33                 }
34             })
35         })
36     </script>
37 </html>

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

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

原文地址:https://www.cnblogs.com/daniao11417/p/9875977.html

时间: 2024-11-18 20:04:51

select设置text的值选中(兼容ios和Android)基于jquery的相关文章

背景音乐的自动播放(兼容 ios 和 android)

ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签 会自动拦截, 除非用户手动点击 交互才会执行 . 但是对于背景音乐,又必须加载的时候就要执行,怎么办,直接调用js 来自动触发. <audio id="bgaudio" src="./media/bg-music.mp3" loop="loop"></audio> <script type="tex

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

最近有一部电视剧叫做<微微一笑很傻逼>里面有个男猪脚,人们都叫他大神~我觉得吧~大神是相对的~所以~啥事都得谦虚! 好了 今天介绍的是如何从0到1利用React Native开发一款兼容IOS和android的仿造京东的APP,是不是很激动?我保证我说的很通俗易懂,当然,大神请滚蛋,这个不适合你看 ok!扯犊子结束,下面开始! 第一步:打开你的手机JD客户端--我们来分析一下 看到了不~在上面的图就是JD客户端的分析图(ok,我承认这图是盗的),从上面的图我们可知道JDAPP的一个页面的主要结

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

// 示例1 open_soft_keyboard({ input: "#username" }); // 示例2 open_soft_keyboard({ input: 'input[value=""]' }); /** * 默认打开软键盘 * @param options{ * input: '#nickname' // 容器节点 * } * @author 蔡繁荣 * @version 1.0.3 build 20151226 */ function open

官方揭秘!同时兼容iOS、Android、微信小程序的UI引擎

在应用开发过程中,一些效果使用纯前端h5实现体验比较差,为此开发者会选择相应的原生UI模块来替代,原生模块性能和体验好,但目前存在的一个问题就是界面可定制性比较差,不能百分百满足需求.为此,结合原生模块的性能和体验以及前端开发的灵活性,APICloud推出了纯翻译模式的UI引擎,并在由APICloud联合极客邦科技举办的"AI时代的移动技术革新"大会上发布了这一新品. 注:纯翻译模式的UI引擎文档查看链接https://docs.apicloud.com/UI-templet/UI-t

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

11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试表单获取元素值</title> <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

jquery操作select详解(取值,设置选中)

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr(&qu

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

<select name="streetid" id="streetid"> <option value="4">北环路</option> <option value="5">天河路</option> <option value="6">清华园路</option> <option value="7"

select设置高度的兼容问题

在IE678下,我们给select设置高度的话,里面的option无法居中,折中的兼容方式就是,我们给select的border:0:外面套一层div,这个div给他设置padding,让select居中,但是IE67个select设置的border还是有问题,所以还要加一个遮住默认边框的层(设置overfow:hidden);ff和chorme按照正常的设置line-height就可以了; IE8和IE8一下的用 <!--[if IE 8]> <![endif]--> 这种写法就

jquery根据接口返回的值来设置asp:CheckBoxList的选中值

接口返回一个json的值,然后通过jquery来选中asp:CheckBoxList相应选中的值 <asp:CheckBoxList runat="server" RepeatColumns="4" ID="cklistLMLX"> <asp:ListItem Text="柏油" Value="柏油"></asp:ListItem> <asp:ListItem Te