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

Posted 2020-09-14 for米洛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

效果图

以上是关于JS 按钮下一步下拉菜单内容转换的主要内容，如果未能解决你的问题，请参考以下文章

js改变下拉框内容

选择值后如何将下拉菜单转换为标签。单击按钮后再次转换为下拉菜单

js实现按钮开关.单机下拉菜单

JGUI源码：实现图标按钮及下拉菜单(16)

2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮同意可点击下一步 3. 全选框)

今天学习心得

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

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