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中获取选中对象的类型
Apr 02 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
js实现上传图片到服务器
Apr 11 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
Destoon实现多表查询示例
2014/08/21 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Django返回json数据用法示例
2016/09/18 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python安装pil库方法及代码
2019/06/25 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
简单了解python数组的基本操作
2019/11/26 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
大雁塔英文导游词
2015/02/10 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
Redis的字符串是如何实现的
2021/10/24 Redis
Java实现学生管理系统(IO版)
2022/02/24 Java/Android