纯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 ...
随机推荐
- 11th 回忆整个学期——告学弟学妹
告诉后来的学弟学妹,不要因为艰难而却步,坚持下去才知道,山的对面是什么.很多东西或许一开始看起来是无用,甚至无意义的,但是努力去做,你才知道价值所在.不要等一切结束了,才懂得自己错过了什么.
- OneZero第五次站立会议（2016.3.25）
会议时间:2016年3月25日 12:45~12:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容. 会议内容:1.界面原型已经确定.(夏负责) 2 ...
- OneZero第五周第二次站立会议（2016.4.19）
1. 时间: 15:15--15:25 共计10分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...
- 用jq获取元素内文本，但不包括其子元素内的文本值的方法
<li id="listItem"> This is some text <span id="firstSpan">First span ...
- MongoDB-管道与聚合(3)
分组:$group() db.集合.aggregate( {$group: {_id:'$分组字段名', 显示字段:{$统计函数: '$统计字段'}}}, ) -- 统计男生 ...
- 【题解】 bzoj4004: [JLOI2015]装备购买 （线性基）
bzoj4004,戳我戳我 Solution: 裸的线性基,这没啥好说的,我们说说有意思的地方(就是我老是wa的地方) Attention: 这题在\(luogu\),上貌似不卡精度,\(bzoj\) ...
- 【BZOJ4391】[Usaco2015 dec]High Card Low Card（贪心）
[BZOJ4391][Usaco2015 dec]High Card Low Card(贪心) 题面 BZOJ 题解 预处理前缀后缀的结果,中间找个地方合并就好了. #include<iostr ...
- 记踩坑--Flask Web开发：S6电子邮件 ----[Errno 11004] getaddrinfo failed
必须要记录下踩过的坑,一来,为后来者铺路,二来,实在摔得疼,提醒自己写代码要谨小慎微. [Errno 11004] getaddrinfo failed 1.先排除邮箱账号和授权码的错误 测试如下代码 ...
- Angular.js浅谈
至今博主对于MVVM框架比较了解的就只能算有Angular了,首先给大家明确一个概念,Angular1.x才能叫Angular.js,而Angular2.4.5都直接叫Angular了,因为从2开始已 ...
- influxdb简单使用
之前对influxdb有一个简单的了解和入门的使用,近期由于想使用influxdb做一点东西玩玩,又要捡起influxdb.本篇就针对influxdb的数据库.表的概念,增删改查操作.RESTful操 ...