基于JavaScript实现单选框下拉菜单添加文件效果

本节讲述单选框/下拉菜单/添加文件，综合css，html和JavaScript实现的，具体详情如下所示：

单选框：

实现的功能是：（类似平时的性格测试）
先隐藏一部分页面，然后通过点击单选框来显示。
再通过选项的选择-（每个选项有不同的积分）积分的多少来给出评语

演示代码：

<html>
<head>
<title>DHTML技术演示---radio的使用</title>
<meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#contentid{
display:none;/*显示：默认隐藏*/
}
ul{/*无序列表*/
background-color:#80ff00;/*背景色*/
list-style:none;//前面的默认小圆点取消
margin:0px;//外补丁
}
ul li{/*设置ul中的li的字体颜色*/
color:#ff0000;
}
.close{
display:none;
}
.open{
display:block;
}
</style>
<script type="text/javascript">
function showContent(oRadioNode){
var oDivNode = document.getElementById("contentid");
if(oRadioNode.value=="yes"){
oDivNode.style.display="block";
}else{
oDivNode.style.display="none";
}
//第二种方式：利用with
/*
with(oDivNode.style){
if(oRadioNode.value=="yes"){
display="block";
}else{
display="none";
}
}
*/
}
function showResult(){
var oNolRadioNodes = document.getElementsByName("nol");
var val=0;
//undefined如果被用作boolean型也是false
//alert(val);
for(var x=0;x<oNolRadioNodes.length;x++ ){
//找到那个被选中的单选框
if(oNolRadioNodes[x].checked){
val = parseInt( oNolRadioNodes[x].value );
break;
}
}
if(!val){
document.getElementById("erroinfo").innerHTML="没有任何答案被选中".fontcolor("red");
return;
}
//错误信息赋值为空。
document.getElementById("erroinfo").innerHTML="";
if(val>=1 && val<=3){
document.getElementById("res_1").className="open";
document.getElementById("res_2").className="close";
}else{
document.getElementById("res_1").className="close";
document.getElementById("res_2").className="open";
}
}
</script>
</head>
<body>
<div>
您要参与问卷调查吗？<br/>
<!--radio 单选框 name一样就是互斥-->
<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)"/> 是
<input type="radio" name="wenjuan" value="no" onclick="showContent(this)" checked="checked" /> 否
<br/>
</div>
<div id="contentid">
问卷调查内容:<br/>
您的姓名：<input type="text" name="name" /><br/>
您的电话：<input type="text" name="tel"/ >
</div>
<hr/>
<h2>欢迎您参与性格测试</h2>
<h3>第一题：</h3>
<span>您喜欢的水果是什么？</span>
<ul id="nolul">
<li><input type="radio" name="nol" value="1"/> 葡萄</li>
<li><input type="radio" name="nol" value="2"/> 西瓜</li>
<li><input type="radio" name="nol" value="3"/> 苹果</li>
<li><input type="radio" name="nol" value="4"/> 芒果</li>
<li><input type="radio" name="nol" value="5"/> 樱桃</li>
</ul>
<div>
<input type="button" value="查看测试结果" onclick="showResult()">
<span id="erroinfo"></span>
<div id="res_1" class="close">1-3分：你的性格偏内向，建议。。。</div>
<div id="res_2" class="close">4分以上：你的性格偏外向，建议。。。</div>
</div>
</body>
</html>

360浏览器8.1 演示结果：

一开始的页面：

单选框选中”是”：

不选中水果时的提示：

选中水果时的提示：

下拉列表：

简单的演示代码：

<html>
<head>
<title>DHTML技术演示---select的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.clrclass{
height:50px;
width:50px;
float:left;/*漂浮*/
margin-right:30px;
margin-bottom:20px;/*下-外补丁*/
}
#text{
clear:left;/*左边不能漂浮*/
}
</style>
<script type="text/javascript">
function changeColor( oDicClrNode ){
//得到要设置的颜色对象
var colorVal = oDicClrNode.style.backgroundColor;
//alert(colorVal);
//设置字体的颜色
document.getElementById("text").style.color=colorVal;
}
function changeColor2(){
//alert("aabb");//试试能不能监听
var oSelectNode = document.getElementsByName("selectColor")[0];
var collOptionNodes =oSelectNode.options;//options 获取 select 对象中 option 对象的集合。
// for(var x=0;x<collOptionNodes.length;x++){
// alert( collOptionNodes[x].innerHTML );
// }//遍历一下。
//选中的选项
//alert( collOptionNodes[ oSelectNode.selectedIndex ].innerHTML );
var colorVar = collOptionNodes[ oSelectNode.selectedIndex ].value;
document.getElementById("text").style.color=colorVar;
}
function changeColor3(){
var oSelectNode = document.getElementsByName("selectColor")[1];
var collOptionNodes = oSelectNode.options;
var colorVar = collOptionNodes[ oSelectNode.selectedIndex ].value;
document.getElementById("text").style.color=colorVar;
}
</script>
</head>
<body>
<div class="clrclass" id="clr1" style="background-color:black" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr4" style="background-color:#c0c0c0;" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr5" style="background-color:#00ffff" onclick="changeColor(this)"></div>
<div id="text">
<img src=""/><br/>
显示效果文字<br/>
显示效果文字<br/>
显示效果文字<br/>
显示效果文字<br/>
</div>
<hr/>
<!-- //本例，给select注册onclick事件不合适，因为每次点击下拉菜单最外层时就会执行
<select name="selectColor" onclick="changeColor2()">
-->
<br/>
<select name="selectColor" onchange="changeColor2()">
<option value="black">--选择颜色--</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
<option value="#c0c0c0">银色</option>
</select>
<hr/>
<select name="selectColor" onchange="changeColor3()">
<!--background-color 设置背景色 -->
<option value="black" style="background-color:black">--选择颜色--</option>
<option value="red" style="background-color:red"> </option>
<option value="green" style="background-color:green"> </option>
<option value="blue" style="background-color:blue"> </option>
<option value="#c0c0c0" style="background-color:#c0c0c0"> </option>
</select>
</body>
</html>

360浏览器8.1 演示结果：

这个下拉框是用文字来说明。

下面这个下拉框直接用颜色来表明设置文字为什么颜色

加强的下拉列表-二级连动菜单-代码演示：

实现的功能就是，根据第一个菜单的选项，来决定第二个菜单的显示。

<html>
<head>
<title>DHTML技术演示---select的使用--二级连动菜单</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function selectCity(){
//json: 用一个二维数组存储"省份-城市集合",以后该数据要来自后台
var collProvices ={"beijing" : ['海淀区','东城区','西城区','朝阳区'],
"zhejiang" : ['杭州','宁波','金华','温州'],
"hunan" : ['益阳','长沙','株洲','湘潭'],
"jiangxi" : ['南昌','九江','萍乡','上饶']
};
//{}这个是用来存key:value的，value可以是任意类型（数组集合都可以）、[]这个是数组
//alert(collProvices["beijing"][2]);//西城区
//获取用户所选择省份的下辖城市集合
var oSelNode = document.getElementById("selid");
var index = oSelNode.selectedIndex;// selectedIndex选中哪项，返回数字
var proviceName = oSelNode.options[index].value;//获得选中的那项的value
var arrCities = collProvices[proviceName];//获得选中的那个省份的下辖城市数组
var oSubSelNode = document.getElementById("subselid");//获得第二个下拉列表对象
//把下拉菜单"subselid"中原有的内容清空
//注意，数组删除之后，长度是自动更新的
//法1--列表从前面开始移除
// for(var x=1;x<oSubSelNode.options.length;){//注意，数组删除之后，长度是自动更新的，因此for最后不要用"x++"修正
// oSubSelNode.removeChild( oSubSelNode.options[x] );
// }
//oSubSelNode.length和oSubSelNode.options.length的值一样
//oSubSelNode[x]和oSubSelNode.options[x]一样
//法2--列表从后面开始移除
// for(var x=oSubSelNode.length-1;x>=1;x--){
// oSubSelNode.removeChild( oSubSelNode[x] );
// }
//法3--直接给oSubSelNode.options.length或oSubSelNode.length赋值
oSubSelNode.options.length=1; //长度设置为1 ，那么剩余的选项自动被删掉
//把城市集合中的每个元素添加到下拉菜单"subselid"当中
for(var x=0;x<arrCities.length;x++){
var optionNode = document.createElement("option");
optionNode.innerHTML=arrCities[x];
//oPtionNode.value=...[x];//正式开发，应该还有该选项对应的value值要赋,这里我们就省略了。
oSubSelNode.appendChild(optionNode);
}
}
</script>
</head>
<body>
<select id="selid" onchange="selectCity()">
<option>--选择省份--</option>
<option value="beijing">北京</option>
<option value="hunan">湖南</option>
<option value="zhejiang">浙江</option>
<option value="jiangxi">江西</option>
</select>
<select id="subselid">
<option>--选择城市--</option>
</select>
</body>
</html>

360浏览器8.1 演示结果：

file组件–添加与删除附件

没有与后台联系的功能哦，只是学下html中的技术

演示代码：

<html>
<head>
<title>DHTML技术--file组件--添加与删除附件</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序： L – V – H – A
*/
table a:link,table a:visited, img{
text-decoration:none;
/*检索或设置对象中的文本的装饰。
text-decoration:
none :　 默认值。无装饰
blink :　 闪烁
underline :　 下划线
line-through :　 贯穿线
overline :　 上划线
*/
color:#0000ff;
}
table a:hover{
color:#ff0000;
}
</style>
<script type="text/javascript">
function addFile(){
var oFileTableNode = document.getElementById("fileTable");
var oTrNode = oFileTableNode.insertRow();//insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中。
var oTdNodeFile = oTrNode.insertCell();//insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。
oTdNodeFile.innerHTML="<input type='file'/>";
var oTdNodeDel = oTrNode.insertCell();
//用文字
//oTdNodeDel.innerHTML="<a href='javascript:void(0)' onclick='deleteFile(this)'>删除附件</a>";
//用图片---自己找个图片，取名为a.jpg就可以了-或者改代码
oTdNodeDel.innerHTML="<img src='a.jpg' alt='删除附件' onclick='deleteFile(this)'/>";
}
function deleteFile(oANode){
//a标签的父节点是td，td父节点是tr。
var oTrNodeDel = oANode.parentNode.parentNode;//TR
oTrNodeDel.parentNode.removeChild( oTrNodeDel );
}
</script>
</head>
<body>
<table id="fileTable">
<tr>
<th>
<a href="javascript:void(0)" onclick="addFile()">添加附件</a>
</th>
</tr>
<!--点按钮来添加附件，所以不用html，用JavaScript写
<tr>
<td><input type="file"/> </td>
<td> <a href="javascript:void(0)" onclick="deleteFile(this)">删除附件</a> </td>
</tr>
-->
</table>
</body>
</html>

360浏览器8.1 演示结果：

删除第二行的tr：

以上所述是小编给大家介绍的基于JavaScript实现单选框下拉菜单添加文件效果的相关知识，希望对大家有所帮助，如果大家想了解更多内容敬请关注我们！

赞 (0)

相关推荐

  • JavaScript实现下拉菜单的显示和隐藏

    JavaScript实现下拉菜单的显示和隐藏

    我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏.使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件. 2)JS基础语法:使用function关键字定义函数. 3)DOM编程:getElementsByTagName()方法. 那么接下来就是我们制作的流程: 1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏. 2)编写显示子菜单showsub()函数:使用getElementsByTagName获

  • JS组件Bootstrap实现下拉菜单效果代码

    JS组件Bootstrap实现下拉菜单效果代码

    Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容:

  • js代码实现下拉菜单【推荐】

    js代码实现下拉菜单【推荐】

    效果: js代码: <script type="text/javascript"> function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName("ul")[0] ;//获取 subMenu.style.display = " block "; } function HideSub(li) { var subMenu = li.getElementsByTagNa

  • 全国省市二级联动下拉菜单 js版

    本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下 js代码部分: /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined&

  • JS 实现导航菜单中的二级下拉菜单的几种方式

    JS 实现导航菜单中的二级下拉菜单的几种方式

    最近整理了, JS 实现导航菜单中的二级下拉菜单的三种方式,便于项目中应用. 如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin

  • 最简单js代码实现select二级联动下拉菜单

    本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.

  • 纯css下拉菜单 无需js

    纯css下拉菜单 无需js

    再来个今天某人说过的例子:纯css下拉菜单: 效果图 这个的实现很简单,主要是:hover和过渡属性transition的使用. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ margin: 0; padding:0; font-size

  • 使用Javascript实现选择下拉菜单互移并排序

    使用Javascript实现选择下拉菜单互移并排序

    本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码. 代码如下: <html> <head> <title>使用Javascript实现选择下拉菜单互移并排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <

  • JS+CSS实现的经典圆角下拉菜单效果代码

    JS+CSS实现的经典圆角下拉菜单效果代码

    本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • javascript手风琴下拉菜单实现代码

    javascript手风琴下拉菜单实现代码

    手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j

  • JS模拟bootstrap下拉菜单效果实例

    本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的

随机推荐