使用jQuery简单的样式选择框

Question

是否有任何简单的方法使用jQuery将样式添加到form中的选择框？

<select> 
    <option>sample</option> 
    <option>sample1</option> 
</select> 

谢谢。

Answer 1

结账Select2。它将设计一个选择框，还可以使用Ajax来即时获取数据。

$(selector).select2(); 

Answer 2

您不能设计<select>节点，但可以直观地表示样式为<ul>的节点，它是下拉菜单。正好当页面加载时隐藏原始下拉菜单并通过<ul>标签形成一个列表来创建一个。并且当用户点击<li>节点时，然后更改<select>标记的值。

Answer 3

没有简单的方法风格表单元素通常是跨浏览器是一致的。但你可以去插件像Uniform

Answer 4

你不能风格的<select>标签。试着用一些HTML包装它们，你可以根据需要设计/编写HTML脚本。

你可以做这样的事情（jQuery中），包你<select>一些标记，

<div class="selectBox"> 
    <ul> 
     <li></li> 
     <li></li> 
    </ul> 
    <select> 
     <option></option> 
     <option></option> 
    </ul> 
</div> 

然后映射<li>更改过自己的脚本<option>变化。

Answer 5

使用jQuery尝试使用简单的造型选择框

<select class="selectboxdiv"> 

     <option>choose preset...</option> 
     <option>two</option> 
     <option>something</option> 
     <option>4</option> 
     <option>5</option> 

    </select> 

    <div class="out"></div> 

http://fiddle.jshell.net/9Wt89/

Answer 6

您也可以使用jQuery.SimpleSelect，这无外乎是一个非常简单，重量轻（1.75kb gzipped）plu杜松子酒会将您的<select>元素转化为一堆div，您可以使用CSS来设计风格。

<select> 
    <option>Option 1</option> 
    <option>Option 2</option> 
    <option>Option 3</option> 
</select>​ 

的JavaScript

$("select").simpleselect(); 

和（使用默认风格，可以很明显的自定义），它给你这个

HTML：

就这么简单：

Documentation