首页 > 代码库 > JS 按钮下一步 下拉菜单内容转换

JS 按钮下一步 下拉菜单内容转换

下一步按钮

用到的知识点

点击事件  onclick

移除属性  removeAttribute

创建属性  setAttribute

 

源代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input id="aaa" type="checkbox" onclick="check()" />
 9         <input type="button" value="下一步" id="btn" disabled="disabled"/>
10     </body>
11 </html>
12 <script>    
13     function check(){
14         var aaa = document.getElementById(aaa);
15         if(aaa.checked){
16         document.getElementById(btn).removeAttribute(disabled);
17     }else{
18         document.getElementById(btn).setAttribute(disabled,disabled);
19     }
20 }
21 </script>

 

效果图

 

点击前

技术分享

 点击后

技术分享

 

下拉菜单内容转换

知识点

appendChild   向节点添加最后一个子节点

selectedIndex    可设置或返回下拉列表中被选选项的索引号

 

源代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8     <form name="form1" method="post" action="">
 9           <select name="sel_place1" size="11" multiple id="sel_place1" style="width: 150px;">
10             <option value="基米西">基米西</option>
11             <option value="罗伊斯">罗伊斯</option>
12             <option value="赫克托">赫克托</option>
13             <option value="J.博阿滕">J.博阿滕</option>
14             <option value="格策">格策</option>
15             <option value="杜尔姆">杜尔姆</option>
16             <option value="斯文本德">斯文本德</option>
17             <option value="拉尔斯本德">拉尔斯本德</option>
18           </select>
19         <input name="sure1" type="button" id="left" value="<-">
20         <input name="sure2" type="button" id="right" value="->">
21         <select name="sel_place2" size="11" multiple id="sel_place2" style="width: 150px;">
22             <option>诺伊尔</option>
23             <option>拉姆</option>
24             <option>默特萨克</option>
25             <option>胡梅尔斯</option>
26             <option>赫韦德斯</option>
27             <option>赫迪拉</option>
28             <option>托尼.克洛斯</option>
29             <option>厄齐尔</option>
30             <option>罗伊斯</option>
31             <option>托马斯.穆勒</option>
32             <option>克洛泽</option>
33         </select>
34 </form>
35     </body>
36 </html>
37 <script>
38 //---------------------**方法一**-----------------------------------------    
39 //    
40     document.getElementById(right).onclick = function(){
41     var sel_place1 = document.getElementById(sel_place1);
42     var sel_place2 = document.getElementById(sel_place2);
43     var obj_temp = sel_place1.options[sel_place1.selectedIndex];
44     sel_place2.appendChild(obj_temp);
45 }
46     document.getElementById(left).onclick = function(){
47     var sel_place1 = document.getElementById(sel_place1);
48     var sel_place2 = document.getElementById(sel_place2);
49     var obj_temp = sel_place2.options[sel_place2.selectedIndex];
50     sel_place1.appendChild(obj_temp);
51 }
52 
53 //---------------------**方法二**-----------------------------------------------
54 //    document.getElementById(‘right‘).onclick = function(){
55 //        var sel_place1 = document.getElementById(‘sel_place1‘);
56 //        var sel_place2 = document.getElementById(‘sel_place2‘);
57 //        var temp = ‘<option value="http://www.mamicode.com/‘+sel_place1.value+‘">‘+sel_place1.value+‘</option>‘
58 //        sel_place1.innerHTML = sel_place1.innerHTML.replace(temp,‘‘);
59 //        sel_place2.innerHTML +=temp;
60 //    }
61 
62 </script>

 

效果图

 技术分享

 

JS 按钮下一步 下拉菜单内容转换