jquery - 单击时更改选择选项的背景颜色

Question

我有这个html代码

<p> 
  <label for="contact">Contact name<span class="required"> *</span></label>
  <select name="contact" id="contact" onClick="clearSelect(this,'contact')">
  <option value="">Select Contact</option>
  <?php foreach ($contacts as $contact): ?>
<option value="<?php htmlout($contact['id']); ?>" 
    <?php if ($contact['id'] == $contactID) echo ' selected="selected"';                                
    ?>><?php htmlout($contact['name']); ?></option>
  <?php endforeach; ?>
  </select>    
 </p> 

和这个 jQuery 函数

function clearSelect(thisfield, id) {

$j("#" + id).css("background-color","#FFF");
$j("#" + id).css("border","1px solid #CCCCCC");
$j("#" + id).css("color","#000000");
}

当我单击选择书籍时，选择框的背景变为白色，但下拉列表保持相同的颜色，直到您向下滚动它。

有关如何在单击选择框时将所有选项背景颜色更改为白色的想法吗？

Answer 1

您可能希望将 .css() 方法与 .children() 和 .andSelf() 结合使用(因此它会影响选择和选项):

function clearSelect(thisfield, id) {
    $j("#" + id).children().andSelf().css({"background-color":"#FFF", 
        "border":"1px solid #CCCCCC",
        "color":"#000000"});
}

此外，无需多次调用 .css() 方法，您可以使用属性值集的映射一次性调用...