javascript - 选择框背景颜色html
问题描述
这是我的问题的参考图片。
我有一个 HTML 中的选择框,其颜色如上图和下面的代码所示。使用 CSS,我有使各种option
元素着色的类。如何使选定的项目也具有相同的颜色?
在图片中,红色被选中,但所选项目的背景仍然是白色。另外,有没有办法禁用悬停效果?看看当标记的项目orange
悬停在它突出显示为蓝色时如何?(注意:按下按钮后,我使用 JavaScript 和 jQuery 将项目放入选择器中。)
<div class="selection">
<select id="color">
<option class="selectionpurple" value="purple">purple</option>
<option class="selectionblue" value="blue">blue</option>
<option class="selectionred" value="red">red</option>
<option class="selectiongreen" value="green">green</option>
<option class="selectionorange" value="orange">orange</option>
</select>
</div>
解决方案
您可以使用 jquerychange()
函数来实现这一点。change()
每次选择选项时运行。您只需要获取选定选项的值并使用 jquerycss()
函数应用该样式进行选择。
var selected = $("select option:selected").val();
$('select').css('backgroundColor', selected);
$( "select" ).change(function () {
console.log($(this).val());
$('select').css('backgroundColor', $(this).val())
})
.red {
background-color : red;
}
.blue {
background-color : blue;
}
.green {
background-color : green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text">
<option value="red" class="red" selected>red</option>
<option value="blue" class="blue">blue</option>
<option value="green" class="green">green</option>
</select>
推荐阅读
- github - github 操作不能使用来自私人仓库的操作
- apache-nifi - Apache Nifi 无法加载 MySQL 驱动程序
- url - 您能否添加与用于自定义 Google 站点 URL 的子域前缀不同的 CNAME 记录
- google-analytics - 谷歌分析过滤器——只需要返回空值
- javascript - React:使用 axios 将 api 数据传递给子组件时,如何解决未定义的问题?
- python - 在 Pytorch 中加载数据集
- reactjs - 将 2 HOC 包装到 React 中的组件
- r - 使用有序分类的 R 插补
- python - 在 Elastic Beanstalk AWS 上部署 Python 模型不起作用
- reactjs - 复选框单击在设置状态时显示我未定义