1.select 用来做什么?

select 用于实现下来下拉列表,其 html 结构是这样的:  

<select name="city" id="city">
<option value="1">南京</option>
<option value="2">上海</option>
<option value="3">北京</option>
<option value="4">重庆</option>
</select>

实现的效果如页面:http://qingyuan.to8to.com/ 的选择城市的下拉菜单.

2.实现自定义样式的下拉列表

通常进入页面的时候,下拉菜单的选项有一个需要是默认被选中的。这可以通过在默认被选中的 option 项上添加  selected="selected" 来实现。如:

<select name="city" id="city">
<option value="1">南京</option>
<option value="2">上海</option>
<option value="3" selected="seleced">北京</option>
<option value="4">重庆</option>
</select>

则默认选中的城市是北京这个城市.

通常,设计师给我们的设计稿上会给下拉 select 一个设计,但这个设计通常和 浏览器自带的样式不一样,另外,各个浏览器间,对 select 的默认样式也是不一样的。 这个时候我们需要清除各个浏览器间的默认样式,然后根据设计稿来对 select 排版.

那么如何清除 select 的默认样式呢,参考代码如下:  

select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }

这里有一个在线的参考示例:http://jsbin.com/yuxame/4/edit?html,css,output

参考链接1:http://uplifted.net/programming/change-default-select-dropdown-style-just-css/

参考链接2:http://ourjs.com/detail/551b9b0529c8d81960000007

3.获取下拉列表中选中的值

 当用户选中下拉列表中的某一个选项后我们需要获取到用户选中的这个选项的值。

1) 当用 jquery  来实现选中这个需求时,代码可以这样写:

 $("#select1  option:selected").val();

 2) 当用 zepto 来实现这个需求时,代码需要这样写:

 $('option').not(function(){ return !this.selected })

这样写的原因是:  

  zepto 是基于 标准浏览器来开发的,但是  $('option:selected') 这个选择器并不被标准浏览器所支持。

参考链接:https://github.com/madrobby/zepto/issues/503

下拉框 select的更多相关文章

  1. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  2. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  3. JQuery操作下拉框 select

    要实现这种效果: html代码 1<script src="js/jquery-1.7.2.min.js"></script> 2 <table> ...

  4. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  5. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

  6. 吾八哥学Selenium(四):操作下拉框select标签的方法

    我们在做web页面自动化测试的时候会经常遇到<select></select>标签的下拉框,那么在Python里如何实现去操作这种控件呢?今天就给大家分享一下这个玩法.为了让大 ...

  7. html之多行文本textarea 及下拉框select(12)

    1.多行文本 多行文本使用textarea标签,默认值需要写在中间,和input标签不同,name属性用于后台获取数据(request.POST.get(meno)) <body> < ...

  8. Java+selenium 如何定位下拉框select

    场景:需要进行下拉选择定位元素.   一.select菜单       select也是比较常见的,selenium封装了以下方法, 创建select WebElement selector = dr ...

  9. JS模拟下拉框select

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

随机推荐

  1. Find non-overlap jobs with max cost

    Given a set of n jobs with [start time, end time, cost] find a subset so that no 2 jobs overlap and ...

  2. VBA笔记(一)——基础配置

    开启VBA编程环境——VBE 方法一:按<Alt+F11>组合建 方法二:查看代码 宏设置 当然启用宏的设置方式不同,宏的启动方式也不一样. 首先打开“office 按钮”,选择“exce ...

  3. Window环境下搭建Vue.js开发环境

    原文链接:http://blog.csdn.net/solo95/article/details/72084907 笔者最近在进行前端的学习,在点完了HTML5.CSS3.JavaScript等技能树 ...

  4. Java并发编程实战2-线程安全

    1. 定义 一个类是线程安全的,是指在被多个线程访问时,类可以持续进行正确的行为. 2. WHY 我们想要的是线程安全的程序,为什么在线程安全的开始讲线程安全的类呢? 编写线程安全的代码,本质上就是管 ...

  5. Django 2.0 学习(21):Django Session

    Django Session Session 与Cookie 1.简介 1.Cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们又需要"保持状态",因 ...

  6. BZOJ5101 POI2018Powódź(并查集)

    如果某个格子的积水量超过了该格子的某个挡板高度,那么挡板另一端的积水量就会与其相同.看起来是一个不断合并的过程,考虑并查集.枚举深度,维护每个连通块内的方案数,深度超过某挡板高度时,将两端的连通块合并 ...

  7. python的==和is区别

    Python中: is判断两个标识符是否引自同一个对象 ==判断两个标识符的值是否相等 区别于java: ==判断两个标识符是否引自同一个对象 .equals()判断是否相等   #如果是String ...

  8. 洛谷 P4244 [SHOI2008]仙人掌图 II 解题报告

    P4244 [SHOI2008]仙人掌图 II 题目背景 题目这个II是和SHOI2006的仙人掌图区分的,bzoj没有. 但是实际上还是和bzoj1023是一个题目的. 题目描述 如果某个无向连通图 ...

  9. Java的I/O系统

    1.File类 File类既能代表一个特定文件的名称,又能代表一个目录下的一组文件的名称. 如果我们调用不带参数的list()方法,便可以获得此File对象包含的全部列表.然而,如果我们想获得一个受限 ...

  10. Windows + Ubuntu下JDK与adb/android环境变量配置完整教程

    假设JDK和android sdk路径分别如下: D:\Program Files\Java\jdkD:\android-sdk 1.JDK环境变量配置JAVA_HOME=D:\Program Fil ...