使用jQuery轻松选择样式选择框

Question

有没有简单的方法可以使用jQuery将样式添加到form的选择框中？

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

感谢。

Answer 1

你也可以使用jQuery.SimpleSelect，它只是一个非常简单和轻量级（1.75kb gzip）插件，可以将你的<select>元素转换成一堆div，你将能够但是你想要使用CSS。

就这么简单：

<强> HTML

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

<强>的JavaScript

$("select").simpleselect();

并且（使用您可以明显自定义的默认样式），它会为您提供：

Documentation

Answer 2

结帐Select2。它将为选择框设置样式，也可以使用Ajax动态获取数据。

$(selector).select2();

Answer 3

使用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 4

您无法设置<select>节点的样式，但可以直观地表示样式化的<ul>节点，它是一个下拉菜单。 Just当页面加载时隐藏原始下拉菜单并通过<ul>标签形成列表来创建一个。当用户点击<li>节点时，也会更改<select>标记的值。

Answer 5

通常没有简单方法来设置表单元素的样式，以便在浏览器中保持一致。但你可以选择像Uniform

这样的插件

Answer 6

您无法设置<select>标记的样式。尝试使用一些HTML包装它们，您可以根据需要设置样式/脚本HTML。

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

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

然后将<li>更改为脚本中的<option>更改。