html

<label class="selectGroup">

<span class="selectP"></span>
<select class="select">
<option>类型1</option>
<option>类型2</option>
<option>类型3</option>
</select>
<i class="leftT"></i>
<i class="leftB"></i>
<i class="rightT"></i>
<i class="rightB"></i>
</label>

js

$(".selectGroup .select").change(function(){
$(this).parent('.selectGroup').find(".selectP").text($(this).children('option:selected').val());
})

js模拟下拉框的更多相关文章

  1. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  2. jquery模拟下拉框单选框复选Select,Checkbox,Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...

  3. jQuery+css模拟下拉框模糊搜索的实现

    html: @*输入框*@ <div> <input type="text" style="width: 85%; height: 34px;" ...

  4. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  5. div模拟下拉框

    1.模拟下拉框.点击文本框在文本框下面显示一个层divList,点击divList以外的任何地方,关闭divList层 document.body.onclick = function (e) { e ...

  6. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  7. JS 实现下拉框去重

    JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...

  8. JS 实现下拉框回显

    JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...

  9. JS实现下拉框选中不同的项,对应显示不同的信息

    实现的效果如下图: 页面代码 下拉框: <select id="select3" name="select3" onchange="showli ...

随机推荐

  1. java 全组合 与全排列

    一.全组合 public static void Combination( ) { /*基本思路:求全组合,则假设原有元素n个,则最终组合结果是2^n个.原因是: * 用位操作方法:假设元素原本有:a ...

  2. Spring注解@Component、@Repository、@Service、@Controller @Resource、@Autowired、@Qualifier、@scope

    以下内容摘自部分网友的,并加上了自己的理解 @Service用于标注业务层组件(我们通常定义的service层就用这个) @Controller用于标注控制层组件(如struts中的action.Sp ...

  3. 面试Spring之bean的生命周期

    找工作的时候有些人会被问道Spring中Bean的生命周期,其实也就是考察一下对Spring是否熟悉,工作中很少用到其中的内容,那我们简单看一下. 在说明前可以思考一下Servlet的生命周期:实例化 ...

  4. Scala学习笔记——函数和闭包

    1.本地函数 可以在一个方法内再次定义一个方法,这个方法就是外部方法的内部私有方法,省略了private关键字 2.头等函数 var increase = (x: Int) => x + 1 S ...

  5. nginx 配置信息

    主配置文件: cat /etc/nginx/nginx.conf# For more information on configuration, see:# * Official English Do ...

  6. 学 shell (1/5)

    假设这是某脚本 x.sh 的内容,使用 sh x.sh arg1 来执行该脚本 #!/bin/bashcd `dirname $0`/..source scripts/status.shstart $ ...

  7. [Android] 基于 Linux 命令行构建 Android 应用(六):Android 应用签名

    Android 要求所有应用在安装前必须使用证书进行数字签名.Android 使用该证书来确定一个应用以及其作者身份,该证书不要求由证书发行机构颁发,因此 Android 应用经常使用自我签名的证书, ...

  8. [转]Git忽略规则及.gitignore规则不生效的解决办法

    在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件).这个文件每一行保存了一个匹配的规则例如: # 此为注 ...

  9. Unity3D Shader 马赛克后期效果

    //效果图 //Shader代码 Shader "Hidden/Mosaic" { Properties { _MainTex ("Texture", 2D) ...

  10. centos7上设置中文字符集

    author: headsen  chen date: 2019-03-14   09:00:31   Linux系统会默认使用英文字符集,不会安装中文字符集等其他字符. 公司内部文件服务器等需要中文 ...