注意:
1.option 设置 display:none 不兼容 ie 的问题
2.option 的外包含标签和内包含标签浏览器都不读取自动拦截, 也不报错.
解决 display:none 的兼容问题
- <!DocType html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <select>
- <option value="papername" selected="selected"> 选项一 </option>
- <option value="state"> 选项二 </option>
- <option value="state"> 选项三 </option>
- <option value="state"> 选项四 </option>
- <option value="state"> 选项五 </option>
- <option value="state"> 选项六 </option>
- </select>
- <button onclick="toggleOptionShow($('select'),'',[0,1,3])"> 隐藏一, 二, 四 </button>
- <button onclick="toggleOptionShow($('select'),[0,1,3],'')"> 显示一, 二, 四 </button>
- <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- /* 参数说明:
- 需被控制的 Select 对象,
- 需显示的 option 序号 (留空则不处理) eg:[0,1,3],
- 需隐藏的 option 序号 (留空则不处理) eg:[2,4,6]
- */
- function toggleOptionShow(obj,arrShow,arrHide){
- function arrHandle(arr,type){
- if($.isArray(arr)){
- var len=arr.length;
- for(i=0;i<len;i++){
- var optionNow=obj.find("option").eq(arr[i]);
- var optionP=optionNow.parent("span");
- if(type=="show"){
- if(optionP.size()){
- optionP.children().clone().replaceAll(optionP);
- }
- }else{
- if(!optionP.size()){
- optionNow.wrap("<span style='display:none'></span>");
- }
- }
- }
- }
- }
- arrHandle(arrShow,"show");
- arrHandle(arrHide,"hide");
- }
- </script>
- </body>
- </html>
来源: https://www.2cto.com/kf/201805/746169.html