<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <select name="slt" id="slt" style="width: 100px"></select>

 <script src="js/jquery-1.11.3.js"></script>

 <script>

     var arr1 = ["A","B","C","D"];

     var arr2 = ["+111","+222","+333","+444"];

     function arr(){

         $('#slt').html("");

         for(var i= 0;i<arr1.length;i++){

             //var ops= $("<option value="+i+">"+arr1[i]+""+arr2[i]+"</option>");

             var ops= "<option value="+i+" id='d"+i+"'>"+arr1[i]+""+arr2[i]+"</option>";

             $('#slt').append(ops);

         };

     };

     arr();

     var p=true;

     var x =0;

     $('#slt').unbind("click").click(function (e) {

         if(p){

             x++;

             p=false;

             //$('#slt').unbind("click")

             console.log(2)

             e.stopPropagation()

             $('#slt').html("")

             arr();

         }

     })

     $('#slt').change(function(){

         //var slt = $('#slt').val();

         var slt = $('#slt option:selected').html();

         console.log(slt)

         var inx = slt.indexOf("+");

         var inn = slt.slice(inx);//+后面

         var slc = slt.slice(0,inx);//+前面

         //var slc = txt.slice(inx);

         //$('#slt').text(slc);

         console.log(slc);

         //console.log(inn);

        // var ops= "<option value='i'>"+arr1[i]+""+arr2[i]+"</option>";

         $('#slt option:selected').html(slc);

         //console.log($(this).text())

         if(x%2 == 0){

             p=false;

         }

         if(x%2 == 1){

             p=true;

         }

   });

     //arr();

 </script>

 </body>

 </html>

select选项框特效的更多相关文章

  1. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  2. 解决 Ant Design Modal 中的 Select 选项框不能显示的问题

    antd 的 select 在 modal 里不能显示候选框 代码示例 <a-modal> <a-select> <!-- options --> </a-s ...

  3. [js开源组件开发]模拟下拉选项框select

    模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...

  4. 微信小程序之自定义select下拉选项框组件

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

  5. python+selenium七：下拉框、选项框、select用法

    # from selenium import webdriverfrom selenium.webdriver.common.action_chains import ActionChainsimpo ...

  6. WeChat-SmallProgram：自定义select下拉选项框组件

    1):创建组件所需的文件 2):自定义组件 CSS 及 JS 组件的wxml: <view class='com-selectBox'> <view class='com-sCont ...

  7. 仿51job.com城市选择框特效

    650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/att ...

  8. 使select文本框可编辑可选择（jQuery插件）

    最近做项目中用到了这个插件,正好分享下. 1.  需要用的js包点击下载,在项目中引入该js. <script src="${pageContext.request.contextPa ...

  9. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

随机推荐

  1. 判断滑动方向UITableView

    CGFloat lastContentOffset;  //ScoreView 滑动位置 -(void)scrollViewWillBeginDragging:(UIScrollView*)scrol ...

  2. Google中rel="canonical"的相关解释和用法

    转载原地址 http://blog.sina.com.cn/s/blog_673b01740100jxlz.html 近听到很多SEO 对在页面的规范版本用规范 URL 标签( canonical U ...

  3. Unity3D之Mecanim动画系统学习笔记（八）：Animator Layers（动画分层）

    解决什么问题? 动画分层可以用来解决什么样的问题呢?试想一下如果你要开发一款第三人称的射击游戏,那么肯定是希望身体的动画分为上下两部分,上方根据瞄准的位置和是否射击进行动画播放,下方根据移动播放动画. ...

  4. Visual Studio 调用 Delphi DLL 会退出的解决方案

    新写了一个 Delphi 的 dll 供 C# 程序调用,却发现在使用 Visual Studio 2012 进行调试时,程序会在调用后自动退出. 经过对比,只需要将工程属性中“调试”一页下的“启用 ...

  5. 梦断代码3-message center消息的集中分发

    上一代产品模块有30多个,从底层硬件基础组件到上层应用控制.qos,各个模块通信据说都是直接向模块索要信息.最坏的死锁情况大概就是这样: 在产品升级后,加入了一个消息中心的模块,负责统一管理各个模块的 ...

  6. 加粗合并latex表格线的加粗及合并两行

    每日一贴,今天的内容关键字为加粗合并 在latex中要设置加粗的表格线,要使用如下包: \usepackage{booktabs} 如下图中的表格,首行(\toprule[2pt]),旁边行(\mid ...

  7. PAT 1021

    1021. Deepest Root (25) A graph which is connected and acyclic can be considered a tree. The height ...

  8. C#_自动化测试1_模拟post,get_12306火车票网站自动登录工具

    还记得2011年春运,12306火车票预订网站经常崩溃无法登录吗. 今天我们就开发一个12306网站自动登录软件. 帮助您轻松订票 通过前两篇博客Fiddler教程和HTTP协议详解,我们了解了Web ...

  9. linux下使用find xargs grep查找文件及文件内容

    1,在某个路径下查文件. 在/etc下查找“*.log”的文件 find /etc -name “*.log” 2,扩展,列出某个路径下所有文件,包括子目录. find /etc -name “*” ...

  10. tar --help

    pengdl@debian:~/test$ mkdir test1 pengdl@debian:~/test$ mkdir test2 pengdl@debian:~/test$ tar -xzf p ...