下拉框的应用(设置字体颜色、两个下拉框的对应)
引例:
- <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{
- list-style:none;
- margin:0px;
- }
- .open{
- display:block;
- }
- .close{
- display:none;
- }
- </style>
- <script type="text/javascript">
- function showContent(oNode){
- var showDivContent=document.getElementById("contentId");
- /*
- if (oNode.value=="yes"){
- showDivContent.style.display="block";
- } else {
- showDivContent.style.display="none";
- }
- */
- with(showDivContent.style){
- if (oNode.value=="yes"){
- display="block";
- } else {
- display="none";
- }
- }
- }
- function showResult(){
- var value=0;
- var topicOneRadioNodes=document.getElementsByName("topicOne");
- for (var x=0;x<topicOneRadioNodes.length;x++){
- if (topicOneRadioNodes[x].checked){
- value=parseInt(topicOneRadioNodes[x].value);
- break;
- }
- }
- if (!value){
- document.getElementById("topicOneErrorInfo").innerHTML="No selection was selected.".fontcolor("red");
- return;
- }
- document.getElementById("topicOneErrorInfo").innerHTML="";
- if (value>0&&value<4){
- 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>
- Do you want to take part in the questionnaire research?<br/>
- <input type="radio" name="questionnaire" value="yes" οnclick="showContent(this)">yes
- <input type="radio" name="questionnaire" value="no" οnclick="showContent(this)">no<br/>
- </div>
- <div id="contentId">
- The content of the questionnaire.<br/>
- name: <input type="text" name="name"><br/>
- telephone: <input type="text" name="telephone">
- </div>
- <hr/>
- <h2>Welcome to character test</h2>
- <h3>Topic one</h3>
- <span>Which fruit below do you like best.</span>
- <ul id="topicOne">
- <li><input type="radio" name="topicOne" value="1">Grape</li>
- <li><input type="radio" name="topicOne" value="2">Watermelon</li>
- <li><input type="radio" name="topicOne" value="3">Apple</li>
- <li><input type="radio" name="topicOne" value="4">Mango</li>
- <li><input type="radio" name="topicOne" value="5">Cherry</li>
- </ul>
- <div>
- <input type="button" value="Show the result" οnclick="showResult()">
- <div id="res_1" class="close">1 to 3 scores: you are introversion</div>
- <div id="res_2" class="close">more than 4 scores: you are outgoing</div>
- </div>
- <span id="topicOneErrorInfo"></span>
- </body>
- </html>
1、设置字体颜色
- <html>
- <head>
- <title>DHTML技术演示---selcet的使用</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(oDivClrNode){
- var colorVal=oDivClrNode.style.backgroundColor;
- document.getElementById("text").style.color=colorVal;
- }
- function changeColor2(){
- var oSelectNode=document.getElementsByName("selectColor1")[0];
- var oCollOptions=oSelectNode.options;
- var colorValue=oCollOptions[oSelectNode.selectedIndex].value;
- document.getElementById("text").style.color=colorValue;
- }
- function changeColor3(){
- var oSelectNode=document.getElementsByName("selectColor2")[0];
- var oCollOptions=oSelectNode.options;
- var colorValue=oCollOptions[oSelectNode.selectedIndex].value;
- document.getElementById("text").style.color=colorValue;
- }
- </script>
- </head>
- <body>
- <div class="clrClass" id="clr1" style="background-color:red" οnclick="changeColor(this)"></div>
- <div class="clrClass" id="clr2" style="background-color:green" οnclick="changeColor(this)"></div>
- <div class="clrClass" id="clr3" style="background-color:blue" οnclick="changeColor(this)"></div>
- <div id="text">
- 显示效果文字1<br/>
- 显示效果文字2<br/>
- 显示效果文字3<br/>
- 显示效果文字4<br/>
- </div>
- <hr/>
- <select name="selectColor1" οnchange="changeColor2()">
- <option value="black">--请选择颜色--</option>
- <option value="red">红色</option>
- <option value="green">绿色</option>
- <option value="blue">蓝色</option>
- </select>
- <hr/>
- <select name="selectColor2" οnchange="changeColor3()">
- <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>
- </select>
- </body>
- </html>
结果:
2、两个下拉框之间的对应
- <html>
- <head>
- <title>DHTML技术演示---selcet的使用</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript">
- function selectCity(){
- var collProvinces ={
- "beijing" : ['海淀区','东城区','西城区','朝阳区'],
- "zhejiang" : ['杭州','宁波','金华','温州'],
- "hunan" : ['益阳','长沙','株洲','湘潭'],
- "jiangxi" : ['南昌','九江','萍乡','上饶']
- };
- var selNode=document.getElementById("provincesId");
- var index=selNode.selectedIndex;
- var provinceName=selNode.options[index].value;
- var arrCities=collProvinces[provinceName];
- var cityNode=document.getElementById("citiesId");
- cityNode.options.selectedIndex=0;
- //把下拉菜单"subselid"中原有的内容清空
- //法1
- /*
- for (var x=1;x<cityNode.length;){//注意,数组删除之后,长度是自动更新的,因此for最后不要用"x++"修正
- cityNode.removeChild(cityNode.options[x]);
- }
- */
- //法2
- /*
- for (var x=cityNode.length-1;x>0;x--){
- cityNode.removeChild(cityNode.options[x]);
- }
- */
- //法3
- cityNode.options.length=1;//长度设置为1 ,那么剩余的选项自动被删掉
- for (var x=0;x<arrCities.length;x++){
- var optionNode=document.createElement("option");
- optionNode.innerHTML=arrCities[x];
- cityNode.appendChild(optionNode);
- }
- }
- </script>
- </head>
- <body>
- <select id="provincesId" οnchange="selectCity()">
- <option>select province</option>
- <option value="beijing">北京</option>
- <option value="hunan">湖南</option>
- <option value="zhejiang">浙江</option>
- <option value="jiangxi">江西</option>
- </select>
- <select id="citiesId">
- <option>--select city--</option>
- </select>
- </body>
- </html>
3、文件添加和删除
- <html>
- <head>
- <title>DHTML技术演示--file组件--添加与删除附件</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style type="text/css">
- table a:link,table a:visited{
- text-decoration:none;
- color:#ff0000;
- }
- table a:hover{
- color:#0080ff;
- }
- </style>
- <script type="text/javascript">
- function addFile(){
- var oTableNode=document.getElementById("fileTableId");
- var trNode=oTableNode.insertRow();
- var tdNode=trNode.insertCell();
- tdNode.innerHTML="<input type='file'>";
- var tdNodeDel=trNode.insertCell();
- //tdNodeDel.innerHTML="<a href='javascript:void(0)' οnclick='deleteFile(this)'>deleteFile</a>";
- tdNodeDel.innerHTML="<img src='123.jpg' alt='删除附件' οnclick='deleteFile(this)'>";
- }
- function deleteFile(oANode){
- var trNode=oANode.parentNode.parentNode;
- trNode.parentNode.removeChild(trNode);
- }
- </script>
- </head>
- <body>
- <table id="fileTableId">
- <tr>
- <th><a href="javascript:void(0)" οnclick="addFile()">addFile</a></th>
- </tr>
- <!--
- <tr>
- <td><input type="file"></td>
- <td><a href="javascript:void(0)" οnclick="deleteFile(this)">deleteFile</a></td>
- </tr>
- -->
- </table>
- </body>
- </html>