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 相关文章推荐
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
简单的JS轮播图代码
Jul 18 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
基于JavaScript实现省市联动效果
Jun 22 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实现多服务器共享SESSION数据的方法
2007/03/16 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
pycharm安装图文教程
2017/05/02 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
大学生会计职业生涯规划范文
2014/02/28 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
学校百日安全活动总结
2015/05/07 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
初三化学教学反思
2016/02/22 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫
MySQL索引失效场景及解决方案
2022/07/23 MySQL