CODEWITHSUNDEEP
javascriptjqueryjquery-ui
homelessDevOps
homelessDevOps

Reputation: 20726

jQuery: Change color of form input when value was edited

I have to change the font color of an jQuery UI Select when the value was edited. The DOM looks like this:

<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>

This is my Jquery code:

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

Which works, but it is changing all selectBoxes, because I have no idea how to just change the color of the edited Select?

Upvotes: 0

Views: 1249

Answers (4)

vinczemarton
vinczemarton

Reputation: 8156

Since there is no correct answer here yet:

This:

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

Should be:

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

This utilizes traversing through .parent(), and .find()

Upvotes: 1

homelessDevOps
homelessDevOps

Reputation: 20726

Solution:

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

Upvotes: 0

Georgi-it
Georgi-it

Reputation: 3686

If you want to change the color of siblings of the selectbox only you should use this

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

but if you want to change the color of some specific checkboxes you should add a class to them 

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

EDIT: this one works

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

this will look for any spans with class ui-selectmenu-status inside the body element, that's how find works.

or you can just do this 

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

Upvotes: 0

chandresh_cool
chandresh_cool

Reputation: 11830

In simple jquery this works

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

Upvotes: 3

Related Questions