select設置text的值選中（兼容ios和Android）基於jquery
阿新 • • 發佈：2018-10-30
ios name aid UNC 其中 style 粘貼 one 部分
前一段時間改了一個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>
大家基本上都是這樣的， 然後兩種操作，一種是讓用戶自己選擇，然後獲取選中的value值，或者是裏面的text值。當然了，大部分都是value，取到，然後傳給後臺就可以了。這個基本上是沒有難度的。請看下面的js代碼：
1 $(".sel").change(function
這裏就不詳情的講了。在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，大家可以自己測試。）
如果大家有什麽好的辦法，也歡迎大家在評論區留言。謝謝~
select設置text的值選中（兼容ios和Android）基於jquery