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检测浏览器flash版本的实现代码
Dec 06 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
JS正则表达式验证密码强度
Mar 18 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
浅析Node.js非对称加密方法
2018/01/29 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
手把手教你如何编译打包video.js
2020/12/09 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
PyQt实现计数器的方法示例
2021/01/18 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
感恩之星事迹材料
2014/05/03 职场文书
假面舞会策划方案
2014/05/29 职场文书
出纳试用期自我评价
2015/03/10 职场文书
护士工作心得体会
2016/01/25 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Python基础之字符串格式化详解
2021/04/21 Python