Question

我有一个包含大量＆lt; select＆gt;的页面元素。我想要实现的是确保如果＆lt; select＆gt;的选择＆lt;选项＆gt;有一个名为 italic 的类，然后是＆lt; select＆gt;然后添加斜体类（即jQuery.addClass('italic')）。如果没有，那么 italic 类将从＆lt; select＆gt;中删除。确保其他＆lt;选项＆gt;元素正确显示（即jQuery.removeClass('italic')）。

我在大多数尝试中注意到的是，所有＆lt; select＆gt;有斜体类或者 italic 类没有相应删除。

由于我不确定我在选择器和回调逻辑中的选择在这种情况下是特别合理或良好的做法（因为我一直在努力使其工作令人沮丧）我决定不包括我之前使用的代码尝试。相反，请参阅这个小HTML＆amp; 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>

另外，我知道并非所有浏览器都支持＆lt; select＆gt;的CSS样式。和＆lt;选项＆gt;。相关的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');
});

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

虽然选择文本框不会显示斜体字体
如果使用键盘选择，则无法使用。您需要为此处理更多事件。

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

Answer 3

nemisj的答案完美地处理了这种行为（除了错字'esle'而不是'else'） - 你只需要一些更好的CSS来完成它：

select.italic {
    font-style:italic;
}

select option {
    font-style:normal;
}    

select option.italic {
  font-style:italic;
}

除非另有说明，否则样式的问题在于选项将在其父选择上采用样式。因此，使用font-style:normal;专门覆盖默认选项，然后使用font-style:italic;重新设置option.italic就可以了。

这是一个测试页面，显示它使用多个选项：http://www.spookandpuff.com/examples/selectStyles.html

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

3 个答案: