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

Question

该脚本需要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>

Answer 1

您可以将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'); 

为了更加用户友好,请考虑使用标签包装输入:

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

这样,除了选择微小的单选按钮外,您的用户还可以单击"男性"一词.

小提琴

您可以稍微简化一下逻辑.

单击单选按钮后,至少会检查其中一个按钮,并且无法取消选中这两个按钮.因此,不需要此测试:

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

此外,select可以直接查询要启用的框,如下所示:

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

您只需启用该select框并禁用另一个.

更新的代码:

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

新小提琴