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()方法，您可以使用属性值集的地图一次性执行...

Answer 2

我不想在选择框中的每个选项上都有边框，所以我将功能更改为此

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

为什么这又不起作用？当我现在点击选择框时出现选项菜单，但只有当我将鼠标悬停在每个选项菜单上时，背景颜色才会改变。这很奇怪。

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

2 个答案: