javascript - jquery select-box - 我怎样才能有两个不同宽度的输入

Question

我正在使用这个 jquery 插件使我的选择下拉框看起来更漂亮。 http://code.google.com/p/select-box/

这是它的一个 fiddle : http://jsfiddle.net/FQKax/1/

我想让两个下拉菜单具有不同的宽度，但我尝试将它们包装在 div 中，尝试破解 js 以给它们不同的 id，我能想到的一切，但没有快乐。

另外，我很惭愧地承认我似乎无法更改实际下拉列表位中文本的颜色。我可以更改背景颜色等，但如果我可以更改文本的颜色，我会感到厌烦......很奇怪

Answer 1

有一个选项，您可以指定将什么用作 sbHolder 对象的类名，但您不想更改它，因为您需要重写 CSS。如果他们允许您设置一个额外的类来申请，那会很好，但他们没有。

我只是在选择元素周围放置一个包装器并使用 CSS 覆盖默认宽度 http://jsfiddle.net/FQKax/8/

.wrapper-one .sbHolder{
    width: 500px;
}

.wrapper-two .sbHolder {
    width: 200px;
}


<div class="wrapper-one">
<select id="language">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>
<br/><br/>

<div class="wrapper-two">
<select id="language2">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>

这需要添加一些标记，@cih 的回答不需要。它只需要使用 jQuery 相应地标记每个实例 http://jsfiddle.net/FQKax/37/

$("#language").selectbox();
$("#language2").selectbox();

$(".sbHolder").each(function(index){
    $(this).addClass('instance-' + index);
});

.instance-0.sbHolder{
    width: 500px;
}

.instance-1.sbHolder {
    width: 200px;
}