jQuery：編輯值時更改表單輸入的顏色

Question

編輯值時，我必須更改jQuery UI Select的字體顏色。 DOM如下所示：

<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");
});

哪個可行，但它正在更改所有selectBox，因為我不知道如何僅更改已編輯Select的顏色？

Answer 1

在簡單的jQuery中這有效

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

Answer 2

由於此處尚無正確答案：

這個：

$('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（）的方式

Answer 3

如果只想更改選擇框的兄弟姐妹的顏色，則應使用此選項

$('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');
    })

這將在body元素中查找帶有ui-selectmenu-status類的所有范圍，這就是find的工作方式。

或者你可以這樣做

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

Answer 4

解：

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