根据所选选项的类更改选择的类

Question

我有一个包含大量<select>元素的页面.我想要实现的是确保如果<select>的selected <option>有一个名为italic的类,那么<select>然后添加了italic类(即jQuery.addClass('italic')).如果没有,则从<select>中删除斜体类以确保正确显示其他<option>元素(即jQuery.removeClass('italic')).

我在大多数尝试中注意到的是,所有<select>都有斜体类,或者斜体类没有被相应删除.

因为我不确定我在选择器和回调逻辑中的选择在这种情况下是特别合理或良好的做法(因为我一直在努力使其工作令人沮丧)我决定不包括我在之前的尝试中使用的代码.相反,请参考这个小的HTML和CSS示例:

.italic {
    font-style: italic;
}

<select id="foo" name="foo" size="1">
  <option value="NA" selected="selected"> - Select - </option>
  <option value="1">Bar</option>
  <option value="2">Fu</option>
  <option value="3">Baz</option>
</select>

另外,我知道并非所有浏览器都支持<select>和<option>的CSS样式.相关的J2EE Web应用程序只能在受控环境下通过Firefox访问.

Answer 1

如果您选择"foo"中的用户更改选项,则将根据所选选项应用或删除斜体.

$("select").change(function(e) {
    var select = e.target;
    var option = select.options[select.selectedIndex];
    if ($(option).hasClass('italic')) {
        $(select).addClass('italic');
    } else {
        $(select).removeClass('italic');
    }
});

Answer 2

你能做的最好的事情就是这样：

$("select").change(function() {
    if ($("select option:selected").hasClass('italic')) {
        $("select").addClass('italic');
    }
    else {
        $("select").removeClass('italic');
    }
});

$("select").mousedown(function() {
    $("select").removeClass('italic');
});

正如您所说，将类应用于选择会将其应用于整个控件，而不仅仅是文本框。您对此无能为力。我的建议是捕获 mousedown 事件并删除样式。这样，当您查看选项时，您的样式就会出现。这有两个缺点：

• 选择时文本框不会出现斜体字体
• 如果你使用键盘来选择，这将不起作用。您需要为此处理更多事件。

如果这对您来说太重要，我建议您使用自定义的选择控件（例如使用 jQuery 和无序列表或表格实现），您可以通过它来控制整个外观。