JS动态添加选项案例分析


Posted in Javascript onOctober 17, 2016

本文实例分析了JS动态添加选项的方法。分享给大家供大家参考,具体如下:

一、问题:

要做一个调查问卷,问题数量不定,问答答案不定。

JS动态添加选项案例分析

JS控答案效果图

二、实现方法:

为了实现这个效果,点击那个按钮就在下面添加4个答案框,选择从A-Z这26个字母,就是为了ASSIC码方便处理

看看HTML结果

<table width="100%" class="form">
  <tr>
  <th width="100px"><label>标题1:</label></th>
  <td align="left"><input type="text" class="large" id="title" name="title" /> <span class="error">请输入标题</span></td>
  </tr>
  <tr>
  <th width="100px"><label>选择类型:</label></th>
  <td align="left">
  <input type="radio" name="radio" />单选   
  <input type="radio" name="boxcheck" />多选   
  <input type="radio" name="select" />下拉   
  </td>
  </tr>
   <tr>
  <th width="100px"><label>答案:</label></th>
    <td align="left">
       <div>
         <div style="float:left;" id="1">
           A:<input type="text" class="mimi" name="A" />
           B:<input type="text" class="mimi" name="B" />
           C:<input type="text" class="mimi" name="C" />
           D:<input type="text" class="mimi" name="D"/>
         </div>
       </div>
         <div class="more" onclick="add_ask($(this))"> </div>
          </td>
    </tr>
</table>

通过这个上面这HTML结果,然后通过JS 实现

function add_ask($this)
{
 var $Word ="";
  //获取前面div层数
 var $div_num = $this.prev().children().attr("id");
  //增加图层
 var $div_next_num = Number($div_num)+1;
 var $last_children_name = $this.prev().children().last().children().last().attr("name").charCodeAt();
 var $html = "<div style=\"float:left;\" id="+$div_next_num+">";
  //进行四次循环
 if($last_children_name+4 <= 90)
 {
  for(var $i=1;$i<=4;$i++)
  {
   $Word = String.fromCharCode($last_children_name + $i);
   $html += $Word+":<input type=\"text\" class=\"mimi\" name="+$Word+" />";
  }
 }else
 {
   $end = 90 - $last_children_name;
   for(var $i=1;$i<=$end;$i++)
  {
   $Word = String.fromCharCode($last_children_name + $i);
   $html += $Word+":<input type=\"text\" class=\"mimi\" name="+$Word+" />";
  }
 }
  $html += "</div>";
 $this.prev().append($html);
}

上面的JS 是通过jquery实现,原理很简答,我就不说太多了。

巧妙的地方就是通过assic码数字转换来实现选项增加。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript放大镜效果的简单实现
Dec 09 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
详解webpack 多入口配置
Jun 16 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
Java  Spring 事务回滚详解
Oct 17 #Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 #Javascript
js浏览器html5表单验证
Oct 17 #Javascript
使用开源工具制作网页验证码的方法
Oct 17 #Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 #Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 #Javascript
JQuery中解决重复动画的方法
Oct 17 #Javascript
You might like
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
React学习笔记之事件处理(二)
2017/07/02 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python 中的int()函数怎么用
2017/10/17 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
小学新学期寄语
2014/04/02 职场文书
创先争优宣传标语
2014/10/08 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL