JS动态添加选项案例分析

 更新时间:2016年10月17日 10:26:56   作者:dengwz7788  
这篇文章主要介绍了JS动态添加选项的方法,结合实例形式分析了javascript针对页面元素动态操作的相关技巧,需要的朋友可以参考下

本文实例分析了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" />&nbsp;<span class="error">请输入标题</span></td>
  </tr>
  <tr>
  <th width="100px"><label>选择类型:</label></th>
  <td align="left">
  <input type="radio" name="radio" />单选&nbsp;&nbsp;&nbsp;
  <input type="radio" name="boxcheck" />多选&nbsp;&nbsp;&nbsp;
  <input type="radio" name="select" />下拉&nbsp;&nbsp;&nbsp;
  </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))">&nbsp;</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数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • 11款基于Javascript的文件管理器

    11款基于Javascript的文件管理器

    11款基于JavaScript的文件管理器,大多数免费开源,功能并不逊色于那些专业的文件管理程序。
    2009-10-10
  • JS Tween 颜色渐变

    JS Tween 颜色渐变

    从我写的as tween改写的,基本功能跟as里面写的一样,只是没有扩展特定功能的接口(比如alpha2,move2,size2,color2等接口,这些在as tween里面都有实现)。
    2008-12-12
  • javascript对select标签的控制(option选项/select)

    javascript对select标签的控制(option选项/select)

    html中的select标签,也是asp.net中的asp:DropDownList控件,接下来介绍javascript对select标签的控制,感兴趣的朋友可以了解下,或许本文对你有所帮助
    2013-01-01
  • JavaScript 数组循环引起的思考

    JavaScript 数组循环引起的思考

    Google array.js 程序中建议改进的代码。思考为什么i-- 到了 i为0时while循环结束了?
    2010-01-01
  • js仿京东放大镜

    js仿京东放大镜

    这篇文章主要为大家详细介绍了js仿京东放大镜,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Js 回车换行处理的办法及replace方法应用

    Js 回车换行处理的办法及replace方法应用

    当我们在文本框里输入文字敲下回车后,希望在提交后网页也显示是换行的效果,可往往并不能如愿以偿啊,实在是愤怒啊自己写了一个回车换行处理的函数,感兴趣的朋友可以了解下啊,希望本文对你有所帮助
    2013-01-01
  • 快速解决layui弹窗按enter键不停弹窗的问题

    快速解决layui弹窗按enter键不停弹窗的问题

    今天小编就为大家分享一篇快速解决layui弹窗按enter键不停弹窗的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Javascript中classList的基本使用方法

    Javascript中classList的基本使用方法

    classList 是一个非常实用的工具,可以让我们轻松地操作元素的类名,在使用 classList 时,我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名,接下来我们详细学习一下classList的使用方法以及相关方法,感兴趣的朋友一起看看吧
    2023-10-10
  • 基于JavaScript实现可搜索的表格

    基于JavaScript实现可搜索的表格

    在Web开发中,数据表格是常见的数据展示形式,这篇文章主要为大家详细介绍了如何使用JavaScript来实现这个功能,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • javascript中的变量作用域以及变量提升详细介绍

    javascript中的变量作用域以及变量提升详细介绍

    在javascript中, 理解变量的作用域以及变量提升是非常有必要的。这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解
    2013-10-10

最新评论