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

新提琴

Answer 2

jsfiddle解決方案

您可以像這樣設置select元素的背景色：

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

或者， 如此處所述 ，您可以設置option元素的背景色：

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