0

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

这是它的工作原理：http: //jsfiddle.net/FQKax/1/

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

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

4

4 回答 4

3

有一个选项可以指定使用什么作为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;
}
于 2012-10-12T23:04:15.033 回答
1

试试这个 http://jsfiddle.net/FQKax/30/

<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>


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

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


  ##### JQUERY #######
      $(function () {
        $("#language").selectbox();
        $("#language2").selectbox();
        $(".sbHolder").each(function(){
          var $langDom = $(this);
          if($langDom.prev().attr('id') == 'language'){
            $langDom.addClass("language_1");  
          } else if($langDom.prev().attr('id') == 'language2') {
            $langDom.addClass("language_2");          
         }
       });
     });

    ###### CSSS TO ADD #####
   .language_1{
     width: 1200px;
    }

    .language_2{
      width: 200px;
     }

​</p>

于 2012-10-12T23:11:04.460 回答
1 
$(".sbHolder").first().addClass("first");

这将添加一个您可以针对您的第一个复选框的类，有更好的方法来遍历多个选择器，请查看此链接..

除此之外，乔回答了你剩下的问题。

于 2012-10-12T23:02:33.283 回答
0

对于文本颜色，更改.sbOptions a:link, .sbOptions a:visited {}和/或.sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {}.

对于宽度，.sbOptions是您的下拉菜单宽度，并且.sbHolder {}是“当前选定”项目的宽度。

于 2012-10-12T22:56:40.487 回答