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. Spring Data Jpa 使用Left Join

    准备: Spring Boot + Web + Jpa 代码: 类:AccountRepository @Query(value = "select new com.sino.report. ...

  2. maven命令package、install、deploy比较

    maven生命周期(lifecycle)由各个阶段组成,每个阶段由maven的插件plugin来执行完成.生命周期(lifecycle)主要包括clean.resources.complie.inst ...

  3. react如何监听路由url变化

    "componentWillReceiveProps" "shouldComponentUpdate" "componentWillUpdate&qu ...

  4. ASP.NET MVC 4 (七) 模板帮助函数

    和普通HTML帮助函数不同,模板帮助函数不需要指定所用的HTML类型,MVC会推断选择合适的HTML元素,这让我们有更多的灵活性. 使用模板帮助函数 我们使用<ASP.NET MVC 4 (六) ...

  5. 如何获取控件id,包名,类名

  6. Tomcat8配置用户名密码

    配置内容: 1.vim   tomcat-user.xml 添加以下内容 <role rolename="manager-gui"/> <role rolenam ...

  7. Flask web开发之路五

    Jinjia2模板 紧接着上篇博客,接下去写if条件判断和for循环遍历以及过滤器 if条件判断 主app文件代码: from flask import Flask,render_template a ...

  8. 手动安装vue-devtools

    第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools git clone https://github.com/vuejs/vue-devtool ...

  9. CCPC-Wannafly Winter Camp Day4 Div1 - 咆咆咆哮 - [三分+贪心]

    题目链接:https://zhixincode.com/contest/18/problem/I?problem_id=267 题目描述 输入描述 输出描述 一行一个整数表示答案. 样例输入 1 32 ...

  10. [No0000D8]rar合并到JPG.bat用图片隐藏文件

    echo off cls echo 请拖入jpg图像文件后回车: set /p imagefile= echo 请拖入rar文件后回车: set /p rarfile= copy /b %imagef ...