<!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. 使用gson进行json转换

    Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库.可以将一个 JSON 字符串转成一个 Java 对象,或者反过来. 示例代码如下: 实体定义 ...

  2. 一个word合并项目的分布式架构设计

    一个word合并项目的分布式架构设计 项目背景与问题起源 我们要给一个客户做word生成报告以及报告合并的工作,要合并的报告非常多,而且每个报告也比较大,一个多的报告大概有200页以上.我们用c#操作 ...

  3. [iOS基础控件 - 6.9.1] 聊天界面Demo 代码

    框架:   所有代码文件:   Model: // // Message.h // QQChatDemo // // Created by hellovoidworld on 14/12/8. // ...

  4. scp命令获取远程文件

    一.scp是什么? scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的,可能会稍微影响 ...

  5. POJ 1860 Currency Exchange (SPFA松弛)

    题目链接:http://poj.org/problem?id=1860 题意是给你n种货币,下面m种交换的方式,拥有第s种货币V元.问你最后经过任意转换可不可能有升值.下面给你货币u和货币v,r1是u ...

  6. HDU 4463 Outlets （最小生成树）

    题意:给定n个点坐标,并且两个点已经连接,但是其他的都没有连接,但是要找出一条最短的路走过所有的点,并且路线最短. 析:这个想仔细想想,就是应该是最小生成树,把所有两点都可以连接的当作边,然后按最小生 ...

  7. Unity3D之Mecanim动画系统学习笔记（七）：IK（反向动力学）动画

    什么是IK? IK(Inverse Kinematics)即反向动力学,即可以使用场景中的各种物体来控制和影响角色身体部位的运动,一般来说骨骼动画都是传统的从父节点到子节点的带动方式(即正向动力学), ...

  8. 线性判别分析（Linear Discriminant Analysis，LDA）

    一.LDA的基本思想 线性判别式分析(Linear Discriminant Analysis, LDA),也叫做Fisher线性判别(Fisher Linear Discriminant ,FLD) ...

  9. AOE关键路径

    这个算法来求关键路径,其实就是利用拓扑排序,首先求出,每个节点最晚开始时间,再倒退求每个最早开始的时间. 从而算出活动最早开始的时间和最晚开始的时间,如果这两个时间相等,则为关键路径. 时间复杂度为O ...

  10. AOV网络拓扑排序

    这个算法,主要是为输出一个无环图的拓扑序列 算法思想: 主要依赖一个栈,用来存放没有入度的节点,每次读取栈顶元素,并将栈顶元素的后继节点入度减一,如果再次出现入度为零的节点,就加入到栈中.参考< ...