纯js遍历json获取值动态为select添加option
遍历json数组 并动态为select添加option
直接上代码，重要部分有注解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui-for-work.css">
<script type="text/javascript" src="../lib/zepto.min.js"></script>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<title>任务发布</title>
</head>
<body>
<form method="post" action="">
<div class="weui-cells__title" style="margin-top: 30px">项目名称</div>
<div class="weui-cells">
<div class="weui-cell">
<select class="weui-cell__bd" name="pro_id" id="sel"> </select>
</div>
</div>
<div class="weui-cells__title" style="margin-top: 30px">任务名称</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="请输入任务名称" name="task_name"/>
</div>
</div>
</div>
<div class="weui-cells__title" style="margin-top: 30px">任务内容</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入内容" rows="7" name="task_content"></textarea>
</div>
</div>
</div>
<div class="weui-cells__title" style="margin-top: 30px">任务期限</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">时间</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="datetime-local" value="" placeholder="" name="task_time"/>
</div>
</div>
</div>
<div class="weui-cells__title" style="margin-top: 30px">任务级别</div>
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-check__label" for="x11">
<div class="weui-cell__bd">
<p>高</p>
</div>
<div class="weui-cell__ft">
<input type="radio" class="weui-check" name="radio1" id="x11" value="2"/>
<span class="weui-icon-checked"></span>
</div>
</label>
<label class="weui-cell weui-check__label" for="x12">
<div class="weui-cell__bd">
<p>中</p>
</div>
<div class="weui-cell__ft">
<input type="radio" name="radio1" class="weui-check" id="x12" checked="checked" value="1"/>
<span class="weui-icon-checked"></span>
</div>
</label>
<label class="weui-cell weui-check__label" for="x13">
<div class="weui-cell__bd">
<p>低</p>
</div>
<div class="weui-cell__ft">
<input type="radio" name="radio1" class="weui-check" id="x13" checked="checked" value="0"/>
<span class="weui-icon-checked"></span>
</div>
</label>
</div>
<div class="weui-btn-area" style="margin-top: 30px ;padding-bottom: 100px">
<input class="weui-btn weui-btn_primary" onclick="sub()" value="确定" type="submit"/>
</div>
</form>
<script type="text/javascript">
/**
* 使用ajax获取服务器json 数组
*/
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'http://www.-------', true);
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {//固定写法
if (httpRequest.readyState == 4 && httpRequest.status == 200) {//固定写法
var json = httpRequest.responseText;//获取到json字符串，还需解析
var obj = JSON.parse(json);//解析字符串---解析成object数组
for (var i = 0; i < obj.length; i++) {
var pro = obj[i];
document.getElementById("sel").options.add(new Option(pro.corp_name, pro.project_id));//使用纯js为select动态添加option
}
}
}
httpRequest.send();
</script>
</body>
</html>
纯js遍历json获取值动态为select添加option的更多相关文章
- JS 遍历JSON中每个key值
JS 遍历JSON中的每个key值,可以按键值对进行存储: var myVar = { typeA: { option1: "one", option2: "two&qu ...
- 通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学
首发于:Aardio通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=429 ...
- js遍历json对象
原生js遍历json对象 遍历json对象: 无规律: <script> var json = [ {dd:'SB',AA:'东东',re1:123}, {cccc:'dd',lk:'1q ...
- JS常用的获取值和设值的方法
1. input 标签<input type="text" name="username" id="name"/> 1) 获取i ...
- 使用js 在IE和火狐firfox 里动态增加select 的option
使用js 在IE和火狐firfox 里动态增加select 的option <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition ...
- js 获取json对象的Key、value（js遍历json对象的key和value）
<script type="text/javascript"> getJson('age'); function getJson(key){ "," ...
- js遍历json数据
先看看json返回的数据结构: 我需要遍历取出bookreno 与 title 加载到页面容器中去 首先我要取到 recommendedBookList 字典结构数据,然后遍历反射到相应对象 ...
- 如何遍历json属性和动态添加属性
var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss', hello:function (){ for(var i=0;i< ...
- js遍历json的key和value
遍历json对象: 无规律: <script> var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}]; for(var i ...
随机推荐
- vmwear导出OVF模板解析（解决ovf导入服务器失败问题，虚拟机版本等）
我们将vmwear虚拟机导出ovf模板后,有三个文件: 1,.mf 保存着.ovf和.vmdk两个文件的SHA1值,用于校验文件的完整性 2,.ovf 以XML格式保存着虚拟机的配置信息 3,.vmd ...
- Linux中dpkg工具update-alternatives实现符号链接软件版本的切换（转）
一.功能作用 update-alternatives是dpkg的实用工具,用来维护系统命令的符号链接,以决定系统默认使用什么命令. 在Debian系统中,我们可能会同时安装有很多功能类似的程序和可选配 ...
- MySQL的group_concat()函数合并多行数据
一个很有用的函数 group_concat(),手册上说明:该函数返回带有来自一个组的连接的非NULL值的字符串结果. 通俗点理解,其实是这样的:group_concat()会计算哪些行属于同一组,将 ...
- 【刷题】洛谷 P4320 道路相遇
题目描述 在 H 国的小 w 决定到从城市 \(u\) 到城市 \(v\) 旅行,但是此时小 c 由于各种原因不在城市 \(u\),但是小 c 决定到在中途与小 w 相遇 由于 H 国道路的原因,小 ...
- mysql 分组取每个组的前几名的问题
select *from hotel_addition_orders awhere (select count(*) from hotel_addition_orders where hotel_or ...
- ZOJ 1314 Reactor Cooling | 上下界无源汇可行流
ZOJ 1314 Reactor Cooling | 上下界无源汇可行流 题意 有一个网络,每条边有流量的上界和下界,求一种方案,让里面的流可以循环往复地流动起来. 题解 上下界无源汇可行流的模型: ...
- oracle 查询重复数据并且删除, 只保留一条数据
数据库操作中,经常会因为导数据造成数据重复,需要进行数据清理,去掉冗余的数据,只保留正确的数据 一:重复数据根据单个字段进行判断 1.首先,查询表中多余的数据,由关键字段(name)来查询. sele ...
- 弹指之间 -- Prerequisites
CHAPTER 1 吉他的分类 Electric Guitar Classic Guitar Folk Guitar CHAPTER 2 吉他各部名称 CHAPTER 3 选购吉他 琴颈弯曲程度 木头 ...
- jdk1.8中获取项目绝对路径和项目路径
request.getSession().getServletContext().getRealPath("") 获取项目的绝对路径,含着项目的名称. request.getSe ...
- nodejs npm install -g 全局安装
1. npm install xxx -g 时, 模块将被下载安装到[全局目录]中. [全局目录]通过 npm config set prefix "目录路径" 来设置. 比如说, ...