【前端小代码】选中checkbox多选框,将值填入select中option中
2015-12-28 17:14
411 查看
通过js实现
代码如下
html代码
效果图
代码如下
<script> function checkbox() { var str=document.getElementsByName("box"); var shosetype=document.getElementById("select"); var objarray=str.length; var chestr=""; var option = ''; for (i=0;i<objarray;i++) { if(str[i].checked == true) { chestr+=str[i].value+","; option += '<option value="' + i + '">' + str[i].value + '</option>'; } } shosetype.innerHTML=option; if(chestr == "") { alert("请先选择一个爱好~!"); } else { alert("您先择的是:"+chestr); } } </script>
html代码
选择您的爱好: <input type="checkbox" name="box" id="box1" value="跳水" />跳水 <input type="checkbox" name="box" id="box2" value="跑步" />跑步 <input type="checkbox" name="box" id="box3" value="听音乐" />听音乐 <input type="button" name="button" id="button" onclick="checkbox()" value="提交" /> <select value="d" id="select"> </select>
效果图
相关文章推荐
- xStream完美转换XML、JSON
- 基于bootstrap的富文本框——wangEditor【欢迎增加开发】
- nodejs 系统 临时文件夹
- HTML5 display:inline、block、inline-block的区别--备用
- Javascript中eval解析的json的几种用法
- 点击input输入法不弹出
- JSON.parse()和JSON.stringify()&&traditional(ajax请求)的作用
- javascript面向对象
- HTML5:元素的属性
- JQuery 中的事件命名空间
- NameNode 的主备切换实现
- CSS:手机页面,常用字号和布局(工作中用)
- NameNode 高可用整体架构概述
- CSS樣式定義及效果
- js delete 用法(删除对象属性及变量)
- react+babel+webpack初试
- 关于 Touchjs 手势识别事件库 this 关键字与选择器不对称情况
- jquery图片轮播效果代码
- 58种jQuery模拟CSS3过渡页面切换特效
- 使用jquery.cookie.js插件实现记住密码功能