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

Posted 2023-02-21

【中文标题】jQuery如何设置/取消设置下拉菜单的背景颜色

【英文标题】：jQuery how to set / unset background color of dropdown menu

【发布时间】：2015-06-03 22:49:01

【问题描述】：

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

【参考方案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');;
    
  
);

您也可以考虑将 other 下拉菜单的值重置为“已选择”，这样您就不会得到一个具有值的禁用下拉菜单。你可以这样做：

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

为了更加方便用户，请考虑使用标签包装您的输入：

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

除了选择微小的单选按钮外，您的用户还可以点击“男性”一词。

Fiddle

---

你可以稍微简化一下逻辑。

单击单选按钮后，至少有一个按钮被选中，并且无法同时取消选中这两个按钮。因此，不需要此测试：

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');
);

New Fiddle

【讨论】：

非常友好和彻底的回复。祝你好运，谢谢。

【参考方案2】：

jsfiddle solution

你可以像这样设置select元素的背景颜色：

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

或者，as discussed here，你可以设置option元素的背景颜色：

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

【讨论】：

非常感谢。我现在可以看到我正在.prop 中离开，非常快。最良好的祝愿。我给你打勾了。