zoukankan      html  css  js  c++  java
  • 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,大家可以自己测试。)

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

  • 相关阅读:
    Dynamically allocated memory 动态分配内存【malloc】Memory leaks 内存泄漏
    const pointers
    heap是堆,stack是栈
    Java中使用Cookie
    Postman注册、登录、导出、导入
    HttpServletRequest get post 入参
    判断设置的时间是否大于当前时间
    JS回车登录
    一个普通的Ajax
    Java工具类
  • 原文地址:https://www.cnblogs.com/daniao11417/p/9875977.html
Copyright © 2011-2022 走看看