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>

效果图

转载于:https://www.cnblogs.com/klose11/p/6776402.html

JS 按钮下一步下拉菜单内容转换相关推荐

js动态改变下拉菜单内容示例 .
<HTML><HEAD><TITLE>动态改变下拉菜单内容示例</TITLE></HEAD><SCRIPT LANGUAGE=java ...
html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题.不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真实的效果.挺不错的.那么接下来的几篇文章主要 ...
JavaScript（js）网页--下拉菜单制作
JavaScript(js)网页–下拉菜单制作在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
JavaScript（js）网页–下拉菜单制作
JavaScript(js)网页–下拉菜单制作在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
JS 新浪下拉菜单+jQuery
思考:首先在CSS布局上就出错了,导致后面设置JS时就有很大的问题 <!DOCTYPE html> <html lang="en"><head> ...
【JS】模拟下拉菜单
鼠标点击时,下拉菜单出现鼠标划过或按键盘上下箭头时,选中的菜单背景色变化,选项内容显示在输入框内鼠标点击或按下回车或空格键时,对应的内容显示在输入框内且下拉菜单消失效果图 HTML <di ...
帆软FineReport_下拉菜单内容并添到文本框，自动查询
参数面板中的下拉 1,数据集 select * from 表名 where 字段名='${自己定义参数名假设是aa}' 点击铅笔打开参数面板,右下角会生成参数aa,点击aa会在参数面板自动生成控件,把 ...
Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)（下拉菜单）
报错内容: 在做网页设计的时候,使用Bootstrap框架的下拉菜单,在谷歌浏览器中打开html进行测试的时候发现点击下拉菜单无反应的问题,打开F12,报错内容如下所示: 前端代码展示 <!DO ...
bootstrap:按钮，下拉菜单
'btn':加按钮样式 btn-small btn-large:调整按钮大小 btn-primary....:调整按钮风格 btn-group:声明这是一个按钮组 <span class='ca ...

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

JS 按钮下一步下拉菜单内容转换相关推荐

最新文章

热门文章

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

JS 按钮下一步 下拉菜单内容转换相关推荐

最新文章

热门文章

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

JS 按钮下一步下拉菜单内容转换相关推荐