最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery how to setunset background color of dropdown menu - Stack Overflow

programmeradmin1浏览0评论

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>

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>
Share Improve this question edited Mar 30, 2015 at 20:58 user94559 60.2k6 gold badges107 silver badges107 bronze badges asked Mar 30, 2015 at 19:15 Victor VictoriaVictor Victoria 611 silver badge7 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

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

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');
发布评论

评论列表(0)

  1. 暂无评论