2013-04-26 62 views
0

我必須更改jQuery UI的字體顏色編輯值時選擇。該DOM看起來是這樣的:jQuery:編輯值時更改表單輸入的顏色

<dd> 
    <select class="filter large" name="xx" style="display: none;"> 
     <option value="0">--</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3" selected="selected">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
    </select> 
    <a class="ui-selectmenu ui-widget ui-state-default ui-corner-all ui-selectmenu-dropdown" id="undefined-button" role="button" href="#" aria-haspopup="true" aria-owns="undefined-menu" style="width: 161px;"> 
    <span class="ui-selectmenu-status">3</span> 
    <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a> 
</dd> 

這是我的jQuery代碼:

$('select').change(function() { 
    $('span.ui-selectmenu-status').css("color","red"); 
}); 

其中一期工程,但它一直在變化selectBoxes,因爲我不知道如何只是改變了編輯的顏色選擇?

+1

尋找與當前'select'用'$(這)'選擇。像'$(this).siblings('。ui-selectmenu-status')'。 – elclanrs 2013-04-26 06:17:07

+0

@elclanrs,這是一個答案,而不是評論... – gdoron 2013-04-26 06:17:55

回答

1

由於沒有正確的答案現在還沒有到:

此:

$('select').change(function() { 
    $('span.ui-selectmenu-status').css("color","red"); 
}); 

應該是:

$('select').change(function() { 
    $(this).parent().find('span.ui-selectmenu-status').css("color","red"); 
}); 

這是利用通過.parent()穿越,並.find()

+0

作品謝謝! – opHASnoNAME 2013-04-26 07:11:28

3

在簡單的jQuery這個作品

$('select').change(function() { 
    $(this).find('option:selected').css('background-color', 'red'); 
}); 
+0

將與「正常」選擇框感謝。但不是與JQ UI選擇(; – opHASnoNAME 2013-04-26 06:25:10

0

如果你想改變選擇框的兄弟姐妹的顏色,如果你想改變一些顏色只有你應該使用這個

$('select').change(function(){ 
    $(this).find('span.ui-selectmenu-status').css('color','red'); 
}) 

但具體複選框,你應該添加一個類給他們

$('.boxes').change(function(){ 
     $(this).find('span.ui-selectmenu-status').css('color','red'); 
    }) 

編輯:這一個工程

$('select').change(function(){ 
     $('body').find('span.ui-selectmenu-status').css('color','red'); 
    }) 

這將尋找在身體元素內具有類ui-selectmenu-status的任何跨度,這就是find方法的作用。

或者你可以做到這一點

 $('select').change(function(){ 
      $('span.ui-selectmenu-status').css('color','red'); 
     }) 
+0

我雖然你的第一個建議可以工作,但它does not。不知道爲什麼jQuery不選擇下一個跨度 – opHASnoNAME 2013-04-26 06:37:57

+0

嘗試$('select')嘗試更改(功能(){ $ (this).siblings('span.ui-selectmenu-status').css('color','red'); }) – 2013-04-26 06:39:47

+0

不起作用..如果我console.log找到的對象,它會返回select元素不是跨度(; – opHASnoNAME 2013-04-26 06:43:02

0

解決方案:

$(this).next('a').find('span.ui-selectmenu-status').css('color','red');

+0

是的,這可以做到。 – SoonDead 2013-04-26 07:10:51