jQuery how to set / unset background color of dropdown menu

Question

The script requires jQuery

All works fine but I need to be able to change the color of the selected dropdown when it is selected by the option box, to (bright green). And greyed out again if the other option is chosen.

I have tried all the suggested tips I read up on i.e. $( "#mOptions" ).prop (.css('background-color','#ffffff')); any color. please help and many thanks. Did not work

The script

$(document).ready(function(){
    $('input[name="gender"]').click(function() {
       if($('input[name="gender"]').is(':checked')) { 
           var radioValue = $("input[name='gender']:checked").val();
            if(radioValue == "m"){
               $( "#mOptions" ).prop( "disabled", false );
               $( "#fOptions" ).prop( "disabled", true );
            } else {
                $( "#mOptions" ).prop( "disabled", true );
               $( "#fOptions" ).prop( "disabled", false );
            }
       }
    });
});

The Form:

<input type="radio" name="gender" value="m" />Male
<input type="radio" name="gender" value="f" />Female
<br />
<select id="mOptions" disabled="true">
    <option>Select</option>
    <option value="1">Shirt</option>
    <option value="2">Pant</option>
    <option value="3">dhoti</option>
</select>

<select id="fOptions" disabled="true">
    <option>Select</option>
    <option value="4">Saree</option>
    <option value="5">Bangle</option>
    <option value="6">handbag</option>
</select>

Answer 1

You can chain a css method to the prop method like this:

$('input[name="gender"]').click(function() {
  if($('input[name="gender"]').is(':checked')) { 
    var radioValue = $("input[name='gender']:checked").val();
    if(radioValue == "m"){
      $( "#mOptions" ).prop( "disabled", false ).css('background-color', 'lightgreen');
      $( "#fOptions" ).prop( "disabled", true  ).css('background-color', '');
    } else {
      $( "#mOptions" ).prop( "disabled", true  ).css('background-color', '');
      $( "#fOptions" ).prop( "disabled", false ).css('background-color', 'lightgreen');;
    }
  }
});

You may also consider resetting the value of the other drop-down to "Selected," so you don't end up with a disabled drop-down that has a value. You can do so like this:

$( "#fOptions" ).prop( "disabled", true  ).css('background-color', '').val('Select'); 

For more user-friendliness, consider wrapping your inputs with a label:

<label><input type="radio" name="gender" value="m" />Male</label>

That allows your users to click the word "Male" in addition to selecting the tiny radio button.

Fiddle

---

You can simplify the logic a bit.

Once you've clicked a radio button, at least one of the buttons is checked, and there's no way to uncheck both of them. Therefore, this test is not needed:

if($('input[name="gender"]').is(':checked'))

Also, the select box to enable can be queried directly like this:

select= $('#'+$(this).val()+'Options');

You simply need to enable that select box and disable the other.

Updated Code:

$('input[name="gender"]').click(function() {
  var value= $(this).val(),
      select= $('#'+value+'Options');

  select
    .prop('disabled', false)
    .css('background-color', 'lightgreen');

  $('#mOptions, #fOptions')
    .not(select)
    .prop('disabled', true)
    .css('background-color', '')
    .val('Select');
});

New Fiddle

Answer 2

jsfiddle solution

You can set the background colour of the select element like so:

$('#mOptions').css('background-color', '#0f0');

Or, as discussed here, you can set the background colour of the option elements:

$('#mOptions option').css('background-color', '#0f0');