基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果
更新時(shí)間：2016年06月26日 08:47:22 作者：諳憶為你蒼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下
本節(jié)講述單選框/下拉菜單/添加文件，綜合css，html和JavaScript實(shí)現(xiàn)的，具體詳情如下所示：
單選框：
實(shí)現(xiàn)的功能是：（類似平時(shí)的性格測試）
先隱藏一部分頁面，然后通過點(diǎn)擊單選框來顯示。
再通過選項(xiàng)的選擇-（每個(gè)選項(xiàng)有不同的積分）積分的多少來給出評語
演示代碼：
<html>
<head>
<title>DHTML技術(shù)演示---radio的使用</title>
<meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#contentid{
display:none;/*顯示：默認(rèn)隱藏*/
}
ul{/*無序列表*/
background-color:#80ff00;/*背景色*/
list-style:none;//前面的默認(rèn)小圓點(diǎn)取消
margin:0px;//外補(bǔ)丁
}
ul li{/*設(shè)置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++ ){
//找到那個(gè)被選中的單選框
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>
您要參與問卷調(diào)查嗎？<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">
問卷調(diào)查內(nèi)容:<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="查看測試結(jié)果" onclick="showResult()">
<span id="erroinfo"></span>
<div id="res_1" class="close">1-3分：你的性格偏內(nèi)向，建議。。。</div>
<div id="res_2" class="close">4分以上：你的性格偏外向，建議。。。</div>
</div>
</body>
</html>
360瀏覽器8.1 演示結(jié)果：
一開始的頁面：
單選框選中”是”：
不選中水果時(shí)的提示：
選中水果時(shí)的提示：
下拉列表：
簡單的演示代碼：
<html>
<head>
<title>DHTML技術(shù)演示---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;/*下-外補(bǔ)丁*/
}
#text{
clear:left;/*左邊不能漂浮*/
}
</style>
<script type="text/javascript">
function changeColor( oDicClrNode ){
//得到要設(shè)置的顏色對象
var colorVal = oDicClrNode.style.backgroundColor;
//alert(colorVal);
//設(shè)置字體的顏色
document.getElementById("text").style.color=colorVal;
}
function changeColor2(){
//alert("aabb");//試試能不能監(jiān)聽
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 );
// }//遍歷一下。
//選中的選項(xiàng)
//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事件不合適，因?yàn)槊看吸c(diǎn)擊下拉菜單最外層時(shí)就會執(zhí)行
<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">藍(lán)色</option>
<option value="#c0c0c0">銀色</option>
</select>
<hr/>
<select name="selectColor" onchange="changeColor3()">
<!--background-color 設(shè)置背景色 -->
<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 演示結(jié)果：
這個(gè)下拉框是用文字來說明。
下面這個(gè)下拉框直接用顏色來表明設(shè)置文字為什么顏色
加強(qiáng)的下拉列表-二級連動菜單-代碼演示：
實(shí)現(xiàn)的功能就是，根據(jù)第一個(gè)菜單的選項(xiàng)，來決定第二個(gè)菜單的顯示。
<html>
<head>
<title>DHTML技術(shù)演示---select的使用--二級連動菜單</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function selectCity(){
//json: 用一個(gè)二維數(shù)組存儲"省份-城市集合",以后該數(shù)據(jù)要來自后臺
var collProvices ={"beijing" : ['海淀區(qū)','東城區(qū)','西城區(qū)','朝陽區(qū)'],
"zhejiang" : ['杭州','寧波','金華','溫州'],
"hunan" : ['益陽','長沙','株洲','湘潭'],
"jiangxi" : ['南昌','九江','萍鄉(xiāng)','上饒']
};
//{}這個(gè)是用來存key:value的，value可以是任意類型（數(shù)組集合都可以）、[]這個(gè)是數(shù)組
//alert(collProvices["beijing"][2]);//西城區(qū)
//獲取用戶所選擇省份的下轄城市集合
var oSelNode = document.getElementById("selid");
var index = oSelNode.selectedIndex;// selectedIndex選中哪項(xiàng)，返回?cái)?shù)字
var proviceName = oSelNode.options[index].value;//獲得選中的那項(xiàng)的value
var arrCities = collProvices[proviceName];//獲得選中的那個(gè)省份的下轄城市數(shù)組
var oSubSelNode = document.getElementById("subselid");//獲得第二個(gè)下拉列表對象
//把下拉菜單"subselid"中原有的內(nèi)容清空
//注意，數(shù)組刪除之后，長度是自動更新的
//法1--列表從前面開始移除
// for(var x=1;x<oSubSelNode.options.length;){//注意，數(shù)組刪除之后，長度是自動更新的，因此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; //長度設(shè)置為1 ，那么剩余的選項(xiàng)自動被刪掉
//把城市集合中的每個(gè)元素添加到下拉菜單"subselid"當(dāng)中
for(var x=0;x<arrCities.length;x++){
var optionNode = document.createElement("option");
optionNode.innerHTML=arrCities[x];
//oPtionNode.value=...[x];//正式開發(fā)，應(yīng)該還有該選項(xiàng)對應(yīng)的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 演示結(jié)果：
file組件–添加與刪除附件
沒有與后臺聯(lián)系的功能哦，只是學(xué)下html中的技術(shù)
演示代碼：
<html>
<head>
<title>DHTML技術(shù)--file組件--添加與刪除附件</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*
a:link 超鏈接未點(diǎn)擊狀態(tài)。
a:visited 被訪問后的狀態(tài)。
a:hover 光標(biāo)移到超鏈接上的狀態(tài)（未點(diǎn)擊）。
a:active 點(diǎn)擊超鏈接時(shí)的狀態(tài)。
使用順序： L – V – H – A
*/
table a:link,table a:visited, img{
text-decoration:none;
/*檢索或設(shè)置對象中的文本的裝飾。
text-decoration:
none : 默認(rèn)值。無裝飾
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 在表格中創(chuàng)建新行(tr)，并將行添加到 rows 集合中。
var oTdNodeFile = oTrNode.insertCell();//insertCell 在表格行(tr)中創(chuàng)建新單元格，并將單元格添加到 cells 集合中。
oTdNodeFile.innerHTML="<input type='file'/>";
var oTdNodeDel = oTrNode.insertCell();
//用文字
//oTdNodeDel.innerHTML="<a href='javascript:void(0)' onclick='deleteFile(this)'>刪除附件</a>";
//用圖片---自己找個(gè)圖片，取名為a.jpg就可以了-或者改代碼
oTdNodeDel.innerHTML="<img src='a.jpg' alt='刪除附件' onclick='deleteFile(this)'/>";
}
function deleteFile(oANode){
//a標(biāo)簽的父節(jié)點(diǎn)是td，td父節(jié)點(diǎn)是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>
<!--點(diǎn)按鈕來添加附件，所以不用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 演示結(jié)果：
刪除第二行的tr：
以上所述是小編給大家介紹的基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果的相關(guān)知識，希望對大家有所幫助，如果大家想了解更多內(nèi)容敬請關(guān)注腳本之家！
您可能感興趣的文章:
- JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級下拉菜單的幾種方式
- 純css下拉菜單 無需js
- JS模擬bootstrap下拉菜單效果實(shí)例
- 全國省市二級聯(lián)動下拉菜單 js版
- JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼
- js實(shí)現(xiàn)select二級聯(lián)動下拉菜單
- 使用Javascript實(shí)現(xiàn)選擇下拉菜單互移并排序
- JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
- javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
- JS+CSS實(shí)現(xiàn)的經(jīng)典圓角下拉菜單效果代碼
- js代碼實(shí)現(xiàn)下拉菜單【推薦】
相關(guān)文章
JavaScript 檢測瀏覽器和操作系統(tǒng)的腳本
代碼轉(zhuǎn)自《Professional JavaScript™ for Web Developers》一書。2008-12-12
dotopAlert 提示用戶需安裝播放器的代碼，多用于電影站推廣某些播放器2012-09-09
瀏覽器頁面的區(qū)域大小如何獲取，在本有個(gè)不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
這篇文章主要介紹了JS計(jì)算輸出100元錢買100只雞問題的解決方法,簡單描述了100元錢買100只雞問題并結(jié)合實(shí)例形式分析了問題解決的思路與具體實(shí)現(xiàn)方法,需要的朋友可以參考下2018-01-01
數(shù)組去重在我們的前端的面試過程中經(jīng)過會遇到,有一些人可能會想到一兩種,但是數(shù)據(jù)去重的算法真的太多了,下面這篇文章主要給大家介紹了關(guān)于前端數(shù)組去重面試3個(gè)小問題的相關(guān)資料,需要的朋友可以參考下2023-01-01
JS 用6N±1法求素?cái)?shù) 實(shí)例教程
顯然，當(dāng)N≥1時(shí)，6N，6N+2，6N+3，6N+4都不是素?cái)?shù)，只有形如6N+1和6N+5的自然數(shù)有可能是素?cái)?shù)。所以，除了2和3之外，所有的素?cái)?shù)都可以表示成6N±1的形式(N為自然數(shù))。2009-10-10
class類是一種抽象的體現(xiàn),用來表示具有相同特性的一類事物,是面向?qū)ο缶幊滩豢扇鄙俚墓ぞ?下面這篇文章主要介紹了javascript語言中類class的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript中一些reduce和map的優(yōu)雅寫法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
兼容Firefox的Javascript XSLT 處理XML文件
這篇文章主要介紹了兼容Firefox的Javascript XSLT 處理XML文件,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)盒子移動動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08