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. Java8学习笔记(四)--接口增强

    增强点 静态方法 public interface InterfacePlus { void run(); static Date createDate(){ return new Date(); } ...

  2. Angular4学习笔记(二)-在WebStorm中启动项目

    点击配置 创建 选择命令 package.json 运行 查看运行结果

  3. SpringBoot(十四)-- 整合Swagger2

    1.pom依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-s ...

  4. Kafka 1.1新功能:数据的路径间迁移

    经常有小伙伴有这样的疑问:为什么线上Kafka机器各个磁盘间的占用不均匀,经常出现“一边倒”的情形? 这是因为Kafka只保证分区数量在各个磁盘上均匀分布,但它无法知晓每个分区实际占用空间,故很有可能 ...

  5. 解决在antd中使用 autoprefixer 9.4.5 会抛出错误 Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed 的问题

    其实这个和antd的版本有关系,只需要把antd的版本升级到3.12.4就可以了 yarn add antd@ --save 记得重新运行一下项目

  6. word2016怎么让目录索引显示在左边?

    视图里面 勾选导航窗格即可 前提是你分级分好

  7. day_10py 简单地名字管理系统

    #!/usr/bin/env/python #-*-coding:utf-8-*- ''' 名字管理系统 做程序迭代,由点到面一点一点来 ''' # 1.打印功能提示 print("=&qu ...

  8. mapper.xml中转义

    1.用转义字符转义 XML转义字符 < < 小于号 > > 大于号 & & 和 &apos; ’ 单引号 " " 双引号 <i ...

  9. 洛谷P1141 01迷宫【bfs】

    题目链接:https://www.luogu.org/problemnew/show/P1141 题意: 有一个填了0和1的n*n的格子,只能0走到1,1走到0 有m组询问(数据量是1e5),问某一个 ...

  10. poj2728 Desert King【最优比率生成树】【Prim】【0/1分数规划】

    含[最小生成树Prim]模板. Prim复杂度为$O(n^2),适用于稠密图,特别是完全图的最小生成树的求解.   Desert King Time Limit: 3000MS   Memory Li ...