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

最新推荐文章于 2022-04-17 15:00:28 发布

程先生哈

最新推荐文章于 2022-04-17 15:00:28 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/qq_35073135/article/details/129154823

版权

　　前一段时间改了一个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，大家可以自己测试。)

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

程先生哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select设置text的值选中（兼容ios和Android）基于jquery

　　前一段时间改了一个bug，是因为select引起的。当时我没有仔细看，只是把bug改完了就完事了，今天来总结一下。　　首先说option中我们通常会设置value的属性的，还有就是text值的，请参见下面的HTML代码：1 <select class="sel" name="">2 <option value="1">one</option&gt...
复制链接

扫一扫