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

jQuery how to set / unset background color of dropdown menu

本文关键字：设置 下拉菜单 取消 背景 颜色 何设置 查询      更新时间：2023-09-26

脚本需要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');;
    }
  }
});

您还可以考虑将other下拉列表的值重置为"Selected"，这样您就不会出现有值的禁用下拉列表。你可以这样做：

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

新Fiddle

jsfiddle解决方案

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

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

或者，如本文所述，您可以设置option元素的背景颜色：

$('#mOptions option').css('background-color', '#0f0');
相关文章：