Question

我有200多个选择框，每个框都单独命名，并带有Yes / No / NA作为答案选项，现在希望<option value="No>选项的背景在选中后以红色突出显示。

在将其添加到特定选择框时，通过onchange属性可以正常工作，但是由于我有200个，我不想逐个应用此代码，而是将全局JS函数应用于所有{{ 1}}盒子，这是我卡住的地方。如何使用一个JS函数处理所有选择框？

使用Javascript：

<select>

CSS：

  $('select').on('change', function () {
      $(this).focus();
      $(this).select();
      $(this).className = this.options[this.selectedIndex].className;
  });

HTML：

.green{ background-color:green; }
.red{ background-color:red; }

编辑：确切地说，问题是该选项目前没有以红色或绿色突出显示，因此我怀疑该功能未被应用。目标是在选择时以及从下拉菜单中选择时，选项以红色/绿色突出显示。

Answer 1

两件事：

jQuery对象没有className属性; DOM元素。而不是
```
$(this).className = ...
```
使用
```
this.className = ...
```
您的代码会将change个事件挂钩在存在时，该代码运行时。因此，在运行该代码之前，您需要确保它们存在。您可以通过确保select标记位于文档末尾，就在结束script标记之前;或者使用jQuery的</body>回调。或者，您可以使用事件委托（稍后介绍）。

期望ready标记位于文档末尾的示例（Stack Snippets放置它的位置），这是最佳做法：

＆＃13;
＆＃13;
script
＆＃13;
$('select').on('change', function() { $(this).focus(); $(this).select(); this.className = this.options[this.selectedIndex].className; });
＆＃13;
.green { background-color: green; } .red { background-color: red; }
＆＃13;
＆＃13;
＆＃13;

如果您无法控制<select id="boh_corridor" name="boh_corridor"> <option value=""></option> <option value="Yes" class="green">Yes</option> <option value="No" class="red">No</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>代码的去处或更喜欢做其他事情，请使用jQuery＆＃39; script：

ready

另一种选择是事件委托。虽然$(document).ready(function() { // ...the code here... });本身没有泡泡，但jQuery会让它冒泡，所以你可以这样做：

change

然后，当您运行该代码时，$(document).on("change", "select", function() { $(this).focus(); $(this).select(); this.className = this.options[this.selectedIndex].className; });元素是否存在并不重要;事件处理程序位于select，而不是单个document。因此，select代码的位置并不重要，您也不需要script。

示例：

＆＃13;
＆＃13;
ready
＆＃13;
$(document).on('change', 'select', function() { $(this).focus(); $(this).select(); this.className = this.options[this.selectedIndex].className; });
＆＃13;
.green { background-color: green; } .red { background-color: red; }
＆＃13;
＆＃13;
＆＃13;

附注：您可以将链接与jQuery对象一起使用，而不是反复调用<select id="boh_corridor" name="boh_corridor"> <option value=""></option> <option value="Yes" class="green">Yes</option> <option value="No" class="red">No</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>：$()

Answer 2

我不确定你想要达到的目标。我将您的代码更改为：

 $('select').on('change', function () {
      $(this).focus();
      $(this).select();
      $(this).css("background-color",$(this).find(":selected").attr("class"));
  });

根据类名设置选择后的背景颜色。在Firefox上测试

Answer 3

这些选择框有一个共同的类吗？如果这样做，您可以选择它们：

$(".your_class").on("change", function(){
  $(this).addClass("border_red"); //add border to select
  $("option",this).removeClass("red"); //clear classes
  $("option:selected", this).addClass("red"); //add .red class
});

查看小提琴：https://jsfiddle.net/m5mzwyt2/

Answer 4

以下代码适用于我，既可以突出显示绿色/红色的选项值，也可以在选择选项后保持背景颜色

JS：

    $(document).ready(function() {
    $('select').on('change', function () {
        $(this).focus();
        $(this).select();
        this.className = this.options[this.selectedIndex].className;
    });
});

JS - 将全局函数应用于所有选择框

4 个答案: