错误的写法


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据下拉框选中的值修改背景颜色</title>
<script type="text/javascript">
function changecolo(colo){//要有返回值
var color=colo.value;

alert(color)
if(color="red"){
document.bgcolor="#FF0000"
}
if(color="yellow"){
document.bgcolor="#FFFF00"
}
if(color="green"){
document.bgcolor="#00FF00"
}
if(color="blue"){
document.bgcolor="#0000FF"
}
else{
document.bgcolor="#FFFFFF"
}
}
</script>
</head>

<body>
<form name="form1">
<select id="colo" onChange="changecolo(this)">
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
</form>
</body>
</html>


纠正后

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据下拉框选中的值修改背景颜色</title>
<script type="text/javascript">
function changecolor(colo){
var color=colo.value
alert(color)
document.bgColor=color
}
</script>
</head>

<body>
<form name="form1">
<select id="colo" onChange="changecolor(this)">
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
</form>
</body>
</html>


或者用document.getElementById()做

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据下拉框选中的值修改背景颜色</title>
<script type="text/javascript">
function changecolor(){
var color=document.getElementById('colo').value

alert(color)
document.bgColor=color
}
</script>
</head>

<body>
<form name="form1">
<select id="colo" onChange="changecolor()">
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
</form>
</body>
</html>

html根据下拉框选中的值修改背景颜色的更多相关文章

  1. 【jquery】ajax 动态 改变 select下拉框选中的值

    //JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...

  2. C# Winform 获得下拉框 选中的值

    string PrintName = cmbPrinter.SelectedIndex.ToString(); PrintName = cmbPrinter.SelectedItem.ToString ...

  3. JavaScript如何获得Select下拉框选中的值

    js代码: var mySelect = document.getElementById("resultList2"); var mySelectText = mySelect.o ...

  4. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  5. js 设置下拉框的默认值

    设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...

  6. jQuery操作下拉框的text值和val值

    jQuery操作下拉框的text值和val值 1,JS源码 <select name="select1" id="select1" style=" ...

  7. python+webdriver,选取Select下拉框中的值

    在选择下拉框中的值时遇到了困难,用driver.find_element_by_id("").send_keys("")进行赋值不能成功获取下拉框中的值.   ...

  8. Python3.x:遍历select下拉框获取value值

    Python3.x:遍历select下拉框获取value值 Select提供了三种选择方法: # 通过选项的顺序,第一个为 0 select_by_index(index) # 通过value属性 s ...

  9. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

随机推荐

  1. Directx11教程(59) tessellation学习(1)

    原文:Directx11教程(59) tessellation学习(1)       在D3D11管线中,新增加了3个stage, Hull shader, Tessellator, Domain s ...

  2. 搭建OA项目环境及卸载指南

    一.项目介绍 1).JDK是什么? 全称:Java Development Kit 中文名:java开发工具包 作用:提供java项目的运行环境         JDK安装 a.jdk.jre 安装 ...

  3. 机房收费系统——技术总结 标签: vb数据库技术 2014-09-07 22:29 1153人阅读 评论(30)

    说完了经验,再谈谈技术方面,其实对于技术,师哥师姐们都已经写了好多博客,这也是我在敲机房几乎没写这方面的博客的原因,不过别人的再好也是别人的,下面说说自己的. (一)数据库的设计 其实虽然说是数据库的 ...

  4. hdu 2196【树形dp】

    http://acm.hdu.edu.cn/showproblem.php?pid=2196 题意:找出树中每个节点到其它点的最远距离. 题解: 首先这是一棵树,对于节点v来说,它到达其它点的最远距离 ...

  5. Java练习 SDUT-1119_输入数字星期,输出英文(switch语句)

    C语言实验--输入数字星期,输出英文(switch语句) Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 从键盘上输入数 ...

  6. qt 自定义窗口绘制正弦曲线

    circlewidget.h #ifndef CIRCLAWIDGET_H #define CIRCLAWIDGET_H #include <QFrame> #include<QVe ...

  7. LA 4119 Always an integer (数论+模拟)

    ACM-ICPC Live Archive 一道模拟题,题意是问一个给出的多项式代入正整数得到的值是否总是整数. 这题是一道数论题,其实对于这个式子,我们只要计算1~最高次项是否都满足即可. 做的时候 ...

  8. autocomplete="off" inpu属性

    input 的属性autocomplete 默认为on 其含义代表是否让浏览器自动记录之前输入的值 很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到 可以在input中加入auto ...

  9. Android Studio(十):添加assets目录

    Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...

  10. Spark-shell批量命令执行脚本

    #!/bin/bash source /etc/profile exec $SPARK_HOME/bin/spark-shell --queue tv --name spark-sql-test -- ...