2011-08-30 51 views
1

我们使用jQuery UI selectmenu,它重写我们的下拉框,如下所示:jQuery的选择菜单问题

<select style="width: 324px; display: none;" id="speedA" name="fruits"> 
    <option value="NA">Please Select</option> 
    <option value="A">Apple</option> 
    <option value="O">Orange</option> 
    <option value="P">Pear</option>       
</select> 

<a aria-owns="speedA-menu" aria-haspopup="true" tabindex="0" href="#" role="button" id="speedA-button" class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown ui-state-active ui-corner-top" style="width: 312px; background: none repeat scroll 0% 0% rgb(239, 239, 239); border: 1px solid rgb(236, 0, 140);"><span class="ui-selectmenu-status">Apple</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a> 

我们有一点的jQuery从而改变这个选择菜单的背景和边框如果选择不是招”牛逼了变化,这完美的作品(你可以在上面的HTML看到,<a>链接已经得到内style""分配给它的错误颜色):

if(bizzstate == "NA") $('#speedA-button').css({"background":"#efefef","border":"1px solid #ec008c"}); 

我们所遇到的问题,越来越这改回它的默认颜色,当它被改变时:

$('#speedA-button').change(function() { 
    $('#speedA-button').css({"background":"","border":"1px solid #AAAAAA"}); 
}); 

上面的代码似乎没有工作..它只是保持原来的颜色。

任何帮助,将不胜感激

更新 =========

想通了,为什么,因为它的东西变化是:

<span class="ui-selectmenu-status">Apple</span> 

NOT :

<a id="speedA-button" class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown error_input ui-corner-all" aria-owns="speedA-menu" aria-haspopup="true" tabindex="0" href="#" role="button" style="width: 312px;"> 

何我们是否在上面的跨度上添加了更改函数?

+0

你可以设置一个HTTP任何机会://的jsfiddle。净? – alex

+0

我已经编辑过更新的帖子,请检查。 – Latox

回答

1

把css放到一个类中。

的类添加到元素:

if(bizzstate == "NA") $('#speedA-button').addClass("specialColors"); 

然后从元素删除类时,你不需要它:

$('#speedA').change(function() { $('#speedA-button').removeClass("defaultColors"); }); 
+0

我已经编辑了更新的帖子,请检查。 – Latox

+0

难道你不想让锚点的颜色改变你的选择框的选中index更改吗? – jzm

+0

这工作完美,对不起,我误解了:) – Latox

0

$('#speedA-button')没有onchange事件,不是吗?