下一步按钮
用到的知识点
点击事件 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="‘+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>
效果图
时间： 2024-10-13 12:12:36