仅更改所选选项的颜色,而不更改下拉菜单中的所有选项的颜色

时间:2018-12-03 14:34:01

标签: javascript jquery html

我有来自HTML后端的动态下拉列表,如下所示。更改选项时,如果选择“成功”,则需要将所选选项的颜色设置为dark red 。否则,选项颜色为默认颜色。我为此设置了一个jQuery。

HTML:

<select class="ready-list">
  <option value="failed">Failed</option>
  <option value="completed">Completed</option>
  <option value="success">Success</option>
  <option value="droped">Droped</option>
</select>

jQuery:

$('.ready-list').on('change', function() {
   var selected_v = this.value;
   if (selected_v != "success") {
      $(this).css("color", "#a94442");
   }
   else {
      $(this).css("color", "black");
   }
});

当我选择“成功”以外的选项时,该选项将显示在dark red中。但是当我再次单击下拉列表时,所有选项均为深红色。再次单击下拉菜单时,我尝试通过on("click")事件将选项颜色重置为默认值,但似乎不起作用。我该如何仅更改出现的颜色?

这是我目前拥有的一个例子

http://jsfiddle.net/m1vpzjyq/1/

3 个答案:

答案 0 :(得分:1)

问题出在$(this)的上下文中。

在这种情况下,$(this)$('.ready-list') ... <select>元素。而且,如果我理解正确,您希望所选的<option>根据其值更改颜色。

如果您将颜色应用于元素...它也适用于子元素。因此,您还必须为其定义一些内容。

我认为您在价值比较中误用了运算符。如果选择了“成功”,则!=应该为==才能设为红色。

  

如果选择“成功”,则需要将所选选项的颜色设置为深红色。

$('.ready-list').on('change', function() {
  var selected_v = this.value;
  $(this).find("option").css("color", "black");  // Set all options to black.
  $(this).css("color", "black");  // Set the select color to black.
  if (selected_v == "success") {
    $(this).find("option:selected").css("color", "#a94442");  // Set selected to red.
    $(this).css("color", "#a94442");  // Set the select color to red.
  }
  /*  This part is now useless...
  else {
    $(this).css("color", "black");
  }*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="ready-list">
  <option value="failed">Failed</option>
  <option value="completed">Completed</option>
  <option value="success">Success</option>
  <option value="droped">Droped</option>
</select>


编辑

这里是较短的JS版本,具有相同的结果...使用2条CSS规则和一个类。

$('.ready-list').on('change', function() {
  (this.value == "success") ?
    $(this).addClass("success-selected") : $(this).removeClass("success-selected")
});
/* To apply the dark red color to the <select> elements */
.success-selected{
  color:#a94442;
}
/* For the options that should remain black */
.success-selected>option:not(:checked){
  color:black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="ready-list">
  <option value="failed">Failed</option>
  <option value="completed">Completed</option>
  <option value="success">Success</option>
  <option value="droped">Droped</option>
</select>

答案 1 :(得分:0)

我看不到事件处理程序的意义,所以我只需要使用CSS设置选项的样式

.ready-list option {
  color: #a94442;
}
.ready-list option[value='success'] {
  color: black;
}
<select class="ready-list">
  <option value="failed">Failed</option>
  <option value="completed">Completed</option>
  <option value="success">Success</option>
  <option value="droped">Droped</option>
</select>

答案 2 :(得分:0)

希望以下代码可以解决您的问题,

2018-12-03 15:03:16.807431: I tensorflow/core/platform/cpu_feature_guard.cc:141] Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2
Traceback (most recent call last):
File "/home/nils/.local/bin/tflite_convert", line 11, in <module>
sys.exit(main())
File "/home/nils/.local/lib/python3.6/site-packages/tensorflow/contrib/lite/python/tflite_convert.py", line 412, in main
app.run(main=run_main, argv=sys.argv[:1])
File "/home/nils/.local/lib/python3.6/site-packages/tensorflow/python/platform/app.py", line 125, in run
_sys.exit(main(argv))
File "/home/nils/.local/lib/python3.6/site-packages/tensorflow/contrib/lite/python/tflite_convert.py", line 408, in run_main
_convert_model(tflite_flags)
File "/home/nils/.local/lib/python3.6/site-packages/tensorflow/contrib/lite/python/tflite_convert.py", line 162, in _convert_model
output_data = converter.convert()
File "/home/nils/.local/lib/python3.6/site-packages/tensorflow/contrib/lite/python/lite.py", line 453, in convert
**converter_kwargs)
File "/home/nils/.local/lib/python3.6/site-packages/tensorflow/contrib/lite/python/convert.py", line 342, in toco_convert_impl
input_data.SerializeToString())
File "/home/nils/.local/lib/python3.6/site-packages/tensorflow/contrib/lite/python/convert.py", line 135, in toco_convert_protos
(stdout, stderr))
RuntimeError: TOCO failed see console for info.
b'2018-12-03 15:03:26.006252: I tensorflow/contrib/lite/toco/import_tensorflow.cc:1080] Converting unsupported operation: FIFOQueueV2\n2018-12-03 15:03:26.006322: I tensorflow/contrib/lite/toco/import_tensorflow.cc:1127] Op node missing output type attribute: batch_join/fifo_queue\n2018-12-03 15:03:26.006339: I tensorflow/contrib/lite/toco/import_tensorflow.cc:1080] Converting unsupported operation: QueueDequeueUpToV2\n2018-12-03 15:03:26.006352: I tensorflow/contrib/lite/toco/import_tensorflow.cc:1127] Op node missing output type attribute: batch_join\n2018-12-03 15:03:27.496676: I tensorflow/contrib/lite/toco/graph_transformations/graph_transformations.cc:39] Before Removing unused ops: 5601 operators, 9399 arrays (0 quantized)\n2018-12-03 15:03:28.603936: I tensorflow/contrib/lite/toco/graph_transformations/graph_transformations.cc:39] After Removing unused ops pass 1: 3578 operators, 6254 arrays (0 quantized)\n2018-12-03 15:03:29.418074: I tensorflow/contrib/lite/toco/graph_transformations/graph_transformations.cc:39] Before general graph transformations: 3578 operators, 6254 arrays (0 quantized)\n2018-12-03 15:03:29.420354: F tensorflow/contrib/lite/toco/graph_transformations/resolve_batch_normalization.cc:42] 
Check failed: IsConstantParameterArray(*model, bn_op->inputs[1]) && IsConstantParameterArray(*model, bn_op->inputs[2]) && IsConstantParameterArray(*model, bn_op->inputs[3]) Batch normalization resolution requires that mean, multiplier and offset arrays be constant.\nAborted (core dumped)\n'
None