好久没有写原生的东西了,今天写了一个小项目里面包含着option选项,所以我决定使用原生JavaScript动态生成,

本着互联网分享精神,我将本篇文章分享给大家。

html代码(就是一个select)

<select name="" id="reg-select"></select>

json数据

    var json = [
{
"cc": "86",
"code": "CN",
"desc": "中国大陆"
},
{
"cc": "852",
"code": "HK",
"desc": "香港"
},
{
"cc": "853",
"code": "MO",
"desc": "澳门"
},
{
"cc": "886",
"code": "TW",
"desc": "台湾"
},
{
"cc": "60",
"code": "MY",
"desc": "马来西亚"
},
{
"cc": "63",
"code": "PH",
"desc": "菲律宾"
},
{
"cc": "65",
"code": "SG",
"desc": "新加坡"
},
{
"cc": "66",
"code": "TH",
"desc": "泰国"
},
{
"cc": "81",
"code": "JP",
"desc": "日本"
},
{
"cc": "82",
"code": "KR",
"desc": "韩国"
},
{
"cc": "91",
"code": "IN",
"desc": "印度"
},
{
"cc": "7",
"code": "RU",
"desc": "俄罗斯"
},
{
"cc": "30",
"code": "GR",
"desc": "希腊"
},
{
"cc": "31",
"code": "NL",
"desc": "荷兰"
},
{
"cc": "34",
"code": "ES",
"desc": "西班牙"
},
{
"cc": "41",
"code": "CH",
"desc": "瑞士"
},
{
"cc": "45",
"code": "DK",
"desc": "丹麦"
},
{
"cc": "46",
"code": "SE",
"desc": "瑞典"
},
{
"cc": "47",
"code": "NO",
"desc": "挪威"
},
{
"cc": "351",
"code": "PT",
"desc": "葡萄牙"
},
{
"cc": "61",
"code": "AU",
"desc": "澳大利亚"
},
{
"cc": "64",
"code": "NZ",
"desc": "新西兰"
},
{
"cc": "1",
"code": "US",
"desc": "美国"
},
{
"cc": "1",
"code": "CA",
"desc": "加拿大"
},
{
"cc": "44",
"code": "GB",
"desc": "英国"
},
{
"cc": "49",
"code": "DE",
"desc": "德国"
},
{
"cc": "39",
"code": "IT",
"desc": "意大利"
},
{
"cc": "33",
"code": "FR",
"desc": "法国"
},
{
"cc": "52",
"code": "MX",
"desc": "墨西哥"
},
{
"cc": "54",
"code": "AR",
"desc": "阿根廷"
},
{
"cc": "55",
"code": "BR",
"desc": "巴西"
}
];

JavaScript代码

    var reg_select = document.getElementById('reg-select');  //找到select标签
var frag = document.createDocumentFragment(); //创建文档片段,文档片段的作用就是让for循环中创建的标签先放到文档片段中,待for循环结束后直接将文档片段插入制定的标签元素内,可以减少dom的操作
for (var i = 0; i < json.length; i++) {
var option = document.createElement("option"); //创建option标签
option.value = [i]; //设置正在创建的option的value属性
option.innerHTML = json[i].desc + "&nbsp" + "(" + "+" + json[i].cc + ")";
frag.appendChild(option); //将设置好的 option插入文档片段。
}
reg_select.appendChild(frag); //循环结束后一次性,将文档片段插入制定的dom中

使用原生JavaScript实现对select增加option标签并附加value属性的更多相关文章

  1. 让 select 的 option 标签支持事件监听(如复制操作)

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

  2. html select与option标签

    1.select 元素 select 元素可创建单选或多选菜单.<select> 元素中的 <option> 标签用于定义列表中的可用选项 常用属性如下: autofocus: ...

  3. 使用 JavaScript 实现对 PDF 的全文索引

    Mozilla实验室最近已经收到了许多为一个项目做出的尝试,这一项目的野心令人印象深刻:在一个浏览器中仅仅使用Javascript来对PDF进行渲染.PDF文档的结构令人难以置信的复杂,因此要祝pdf ...

  4. Jquery实现对select的操作

    select实现对文本框的显示和隐藏 /** * 通过select的值实现对文本框的显示和隐藏 * #id为一个select控件 * .obj为一个文本框 */ function initSelect ...

  5. javascript实现对html便签等字符的转义

    参考链接:https://www.jb51.net/article/152700.htm 请访问以上链接. 本人纯搬迁,防止原作者删除. <script> var HtmlUtil = { ...

  6. 使用js 在IE和火狐firfox 里动态增加select 的option

    使用js 在IE和火狐firfox 里动态增加select 的option <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition ...

  7. 重构一段基于原生JavaScript的表格绘制代码

    为了在CardSimulate项目中方便的显示技能和效果列表,决定重构以前编写的一段JavaScript代码——att表格绘制库,这段代码的作用是将特定的JavaScript数据对象转化为表格,支持精 ...

  8. 动态添加select的option [转载]

    动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习!首先是定义的select元素://根据ID获得select元素 var mySelect = ...

  9. 动态添加select的option

    动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习! 首先是定义的select元素: //根据ID获得select元素var mySelect ...

随机推荐

  1. 如何让input框自动获得焦点

    项目中有个需求  一个用扫描枪输入的input框 为了避免每次都需要人为点击 需要做成当打开页面时该input框自动获取焦点 <input type="text" name= ...

  2. 怎么让一个项目里swift与OC可以兼容混合开发?

    在苹果推出了swift语言之后,很多人担心OC很快会被取代,但是苹果方面表示2年内不会摒弃OC.但现在也快了啊.有的开发团队已经开始基于swift开发,但是有很多旧的框架还没来得及用swift写出来, ...

  3. JS案例之4——Ajax多图上传

    近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来. 我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求.服务器接受并处理传来的表单信息, ...

  4. [反汇编练习] 160个CrackMe之004

    [反汇编练习] 160个CrackMe之004. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  5. 跨时钟域设计【一】——Slow to fast clock domain

    跨时钟域设计是FPGA设计中经常遇到的问题,特别是对Trigger信号进行同步设计,往往需要把慢时钟域的Trigger信号同步到快时钟域下,下面是我工作中用到的慢时钟域到快时钟域的Verilog HD ...

  6. USB中CDC-ECM的了解和配置

    USB中典型类及子类: 类别 解释 子类 典型应用 IC芯片 备注 UVC 视频类 免驱USB摄像头 CDC 通讯类 RNDIS ECM(p24) 免驱USB网卡 RTL8152B EEM ..... ...

  7. 【.NET特供-第三季】ASP.NET MVC系列:MVC与三层图形对照

    近期在开发小组在研究:BS项目中是利用'MVC框架'还是继续沿用'三层'的问题. 由于曾经的.NET项目大多数都是利用三层开发的,所以大多数人都可以对三层进行熟练地运用.而项目的開始我们也曾听说过MV ...

  8. Vue自己写组件——Demo详细步骤

    公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...

  9. MVC學習網站

    http://www.cnblogs.com/haogj/archive/2011/11/23/2246032.html

  10. 2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018) Solution

    A. Altruistic Amphibians Upsolved. 题意: $有n只青蛙,其属性用三元组表示 <l_i, w_i, h_i> l_i是它能跳的高度,w_i是它的体重,h_ ...