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. input 手机号

    关于input手机号的验证 一.手机号的判断方法: function isPhoneTel(n){ var reg = /^1[3|4|5|8]\d{9}$/; if(!!(reg.test(n))) ...

  2. linux:rsync + inotifywait 实现【准实时】同步

    直接上脚本 #!/bin/bash export PATH=./sbin:/bin:/usr/sbin:/usr/bin:/usr/local/bin:$PATH src=/tmp1 #dest=ro ...

  3. es6在项目中的应用

    摘要: 今年es6完成了规范制定,但是各大浏览器厂商还没有完全的支持.如果等到主流浏览器支持了再去学习,可能黄花菜都凉了.小编特地为大家准备了一个查询es6在各浏览器支持情况的站点,可以访问这里查询. ...

  4. [PHP] 02 - Namespace & Class

    两个比较大的话题,独立成本篇. 面向对象编程 一.命名空间 PHP 命名空间可以解决以下两类问题: 用户编写的代码与PHP内部的类/函数/常量或第三方类/函数/常量之间的名字冲突. 为很长的标识符名称 ...

  5. 5 -- Hibernate的基本用法 --6 深入Hibernate映射

    Hibernate提供三种方式将POJO变成PO类: 1. 使用持久化注解(以JPA标准注解为主,如果有一些特殊要求,则依然需要使用Hibernate本身提供的注解). 2. 使用JPA2 提供的XM ...

  6. akka cluster sharding

    cluster sharding 的目的在于提供一个框架,方便实现 DDD,虽然我至今也没搞明白 DDD 到底适用于是什么场合,但是 cluster sharding 却是我目前在做的一个 proje ...

  7. scp出现Permission denied,please try again的解决办法

    当scp的时候我们发现错误,被拒绝,是因为ssh的权限问题,需要修改权限,进入到/etc/ssh文件夹下,用root用户修改文件sshd_config 将PermitRootLogin no / wi ...

  8. 编译你的第一个Java虚拟机--Centos 7 编译openJdk1.7源码

    一.前言 最近在看<深入java虚拟机>,看完后,打算自己实际编译一个jvm出来看看,实践一下. 书上提到了Oracle JDK和OpenJdk的关系,Oracle Jdk7 和OpenJ ...

  9. Power BI 报表服务器发布

    Power BI 报表服务器让你的用户能够访问数据.获取见解,并能够使用 SQL 报表服务器服务的企业报告功能 - 这一切都在现代本地解决方案中完成.让用户能够直观浏览数据并快速发现模式,以便更快作出 ...

  10. js函数 test.caller 谁在调用test函数

    返回调用指定函数的函数. function test() { if (test.caller === null) console.log('test 函数在全局调用'); // 获取调用 test函数 ...