Javascript jQuery如何设置/取消设置下拉菜单的背景色

该脚本需要jQuery

所有作品都很好，但我需要能够改变所选下拉菜单的颜色时，它是由选项框选择，以（亮绿色）。如果选择了其他选项，则会再次变灰

我已经试过了我读到的所有建议技巧。 $（“#mOptions”）.prop（.css（'background-color'，'#ffffff'）；任何颜色。 请帮忙，非常感谢。不起作用

剧本

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

表格：

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

男性
女性


挑选
衬衫
喘气
多蒂
挑选
纱丽
手镯
手提包

您可以将

css

方法链接到

prop

方法，如下所示：

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

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

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

您还可以考虑将另一个下拉的值重置为“选定”，这样就不会有一个具有值的禁用下拉。您可以这样做：

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

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

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

<> P>更多的用户友好性，考虑用一个标签包装输入：

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

另外，可以像下面这样直接查询要启用的

选择

框：

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

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

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

您只需启用

选择
框并禁用另一个

更新代码：

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


您可以设置
选择
元素的背景色，如下所示：

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

或者，您可以设置
选项
元素的背景色：

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

非常友好和彻底的答复。祝你万事如意，谢谢。真的非常感谢。我现在可以看到我正乘着道具离开，非常快。最美好的祝福。我给你打了勾。