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="'+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>
效果图
