纯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 ...
随机推荐
- ci test
下载ci 版本 3.1.9 下载地址 https://www.codeigniter.com/ 怎么查看CI的版本信息?想看某个项目中使用的CI具体是哪个版本,怎么查看?system\core\cod ...
- String js删除字符串的最后一个字符三种方法
字符串 var basic = "abc,def,ghi,"; 第一种 basic = basic.substr(0, basic.length - 1); 第二种 basic = ...
- information_schema系列十一
1: INNODB_CMP 和INNODB_CMP_RESET 这两个表存储的是关于压缩INNODB信息表的时候的相关信息, Column name Description PAGE_SIZE Com ...
- 使用AutoMapper实现Dto和Model的自由转换（下）
书接上文.在上一篇文章中我们讨论了使用AutoMapper实现类型间1-1映射的两种方式——Convention和Configuration,知道了如何进行简单的OO Mapping.在这个系列的最后 ...
- 一本通1630SuperGCD
1630:SuperGCD 时间限制: 1000 ms 内存限制: 524288 KB [题目描述] 来源:SDOI 2009 Sheng Bill 有着惊人的心算能力,甚至能用大脑计 ...
- Java_按位与&,按位或,取反,左移,右移运算符
//按位与运算& System.out.println(0&0);//0 System.out.println(0&1);//0 System.out.println(1&am ...
- 5Java异常处理
五.异常 异常概念总结: 练习一:异常的体系 问题: 1. 请描述异常的继承体系 2. 请描述你对错误(Error)的理解 3. 请描述你对异常(Expection的理解) ...
- 【刷题】BZOJ 3522 [Poi2014]Hotel
Description 有一个树形结构的宾馆,n个房间,n-1条无向边,每条边的长度相同,任意两个房间可以相互到达.吉丽要给他的三个妹子各开(一个)房(间).三个妹子住的房间要互不相同(否则要打起来了 ...
- 解决 Previous operation has not finihsed; run ‘cleanup’ if it was interrupted Please execute the ‘Cleanup’ command
更新时遇到这个问题,解决方法如下: 把根目录下的.svn目录删除掉,再checkout,然后就会出现下面的加version的action. 疯吻IT
- 解题：CF1063F String Journey
题面 分析性质以进行DP 性质1:一定有一个最优解通过每次删除第一个或最后一个字符达到 这个脑补一下就能证明了 那么我们设$dp[i]$表示后缀$[i,n]$选出一个前缀所能达到的最大长度,从右往左D ...