下拉框 select

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

最新文章

热门文章