个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试创建一个 HTML 表单，其中包含多个选择元素，这些元素具有供用户选择颜色的颜色选项。我能够创建一个概念验证文档，该文档成功更改了选择的背景颜色属性以匹配所选选项的背景颜色。但是，第一个选项(其值为“none”，因此应该没有 bg 颜色)也会随着 select 元素的变化而变化。我不知道如何解决这个问题，这有点烦人。
概念验证文档的源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop Down List Test</title>
<style>
select
{
border: 2px solid black;
width: 120px;
height: 30px;
}
select option { height: 30px; }
[value=none] { background-color: transparent; }
[value=red] { background-color: red ; }
[value=green] { background-color: green; }
[value=blue] { background-color: blue ; }
</style>
<script>
/*
This function is called by the onChange event in the form element below
The only input argument is a DOM reference to the form argument itself
If the value of the form element is NOT "none",
Then the background color will be whatever the user selected
Else, the background color is set to transparent
*/
function changeSelectBGColor(form_element)
{
if(form_element.value != "none")
form_element.style.backgroundColor = form_element.value;
else form_element.style.backgroundColor = "transparent";
}
</script>
</head>
<body>
<form>
<!--
When the user selects a color value in this drop-down,
the background color changes to reflect the user's selection
The onchange attribute calls the JS function defined above
-->
<select onchange="changeSelectBGColor(this)">
<option value="none" ></option>
<option value="red" ></option>
<option value="green"></option>
<option value="blue" ></option>
</select>
</form>
</body>
</html>
请原谅我相当奇怪的 OCD 间距约定。它使源代码对我而言更具可读性和可维护性。
有人对如何使这项工作有任何想法吗？如果可能的话，我想避免使用 jQuery 以保持这种简单和轻量级，但我愿意接受使用 jQuery 的建议。
最佳答案
您需要设置元素的初始颜色。将元素设置为透明从最近的背景颜色设置中提取，而不是从初始设置中提取。例如，设置初始/“无”背景颜色元素以匹配文档的实际背景颜色。
关于javascript - 当更改 html 选择的背景颜色时，第一个选项随之更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25298383/
25
4
0
给定一个 Option[Future[Option[Int]]] : scala> val x: Option[Future[Option[Int]]] = Some ( Future ( Some
如果我理解正确，EitherT[Option,A,B] 应该与 Option[Either[A,B]] 相同，但编译器不同意.以下代码编译失败: def f[A,B] = implicitly[Eit
我刚开始在使用 parcel.js 构建静态 Assets 时遇到此错误。它在本地工作，但我在 Heroku 上的构建出错，我不确定它是否相关。 最佳答案 得到同样的问题。通过将 core-js 安装
当我生成 Telerik Report 时，只有 Export PDF 可用。即使我将 docx 和 xlsx 的配置设置为 true。这是我在网络配置中的配置。
我的 iTunesConnect 应用程序显示 Apple Pay 选项。我正在使用布伦特里。 即使我们没有在应用程序中使用 Apple Pay 功能。 有人可以帮我解决如何在我的 itunesCon
我正在 Raspbian 中从命令行运行以下查询: mysql -u $NAME -p $PASS Tweets -e "SELECT count(*) FROM raw_tweets;" 它输出以下
我正在尝试使用 ffmpeg(在 linux 下)为视频添加一个小标题。所以，我使用: ffmpeg -i hk.avi -r 30000/1001 -metadata title="SOF" hk_
我正在尝试使用 ffmpeg 使用 ffserver 流式传输视频。您将在 ffserver1.conf 文件下方找到 ffmpeg 命令的日志输出。 其中一个错误引用了预设，每次我尝试使用预设时，我
我正在尝试对 Option 使用 fold 或 map 操作而不是 match。 我有一个选项 val ao: Option[String] = xxxx 和一个函数 f: (String => Fu
Dockerfile documentation表示有可能通过 --platform FROM 中的选项像这样的指令: FROM [--platform=] [AS ] 在我的 dockerfile
我不确定“属性(property)”或“选项”是否是正确的术语，但这是我需要弄清楚的。 鉴于以下情况: ' $.fileup({ url: '/file/upload',
我正在尝试使用 jQuery 检查是否选择了值 = 1 的选择选项，然后将类添加到某些元素。但有些东西不起作用。可以请人看一下代码吗？ 我的代码: Reservation
我对 VIM 中的这些感到困惑。有些事情需要设置，而另一些则让。 而且，我如何检查某个选项。我知道这是一个选项，因为我使用 set 来更改它。 例如，如何检查当前文件类型选项是否为 java？ 最佳答
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我在看《Professional F# 2.0》一书作者展示如下代码 let a string : option = None if a.IsNone then System.Console.
我习惯使用方法顶部的 java 样板检查输入参数: public static Boolean filesExist(String file1, String file2, String file3
假设我有一串 "Insert Post -title Some PostTitle -category 2 -date-posted 2013-02:02 10:10:10" 我一直在尝试做的是将这个
从 1.3.70 EAP 开始，在 org.jetbrains.kotlin.gradle.dsl.KotlinJvmOptions 这是 var useIR: kotlin.Boolean 哪个激活
我无法获取订购捆绑商品的所有子产品及其选项。这可能吗？ 最佳答案 以下是您如何找出哪些产品应与所有其他项目一起附加到列表中的捆绑产品中的方法: foreach ($order->getAllItems
这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用，visit the
我是一名优秀的程序员,十分优秀！