纯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 ...
随机推荐
- adb 安装apk报INSTALL_FAILED_NO_MATCHING_ABIS
想在模拟器中安装搜狗拼音输入法,结果安装的时候报错:INSTALL_FAILED_NO_MATCHING_ABIS 上网搜索发现解决方法如下: 原博客:使用Genymotion调试出现错误INSTAL ...
- angular 可信的html 指令
angular.module('app').filter('trustHtml', ($sce) => { return (html) => { if(typeof(html)==&quo ...
- idea导入eclipse中的maven项目
1. 删除项目当中除src和pom.xml文件之外的文件 2. 打开idea,选择file – new – project from existing sources 3. 选择项目路径,然后n ...
- 【模板】Kruskal
int n, m; struct Edge { int u, v, w; }a[MAX_M]; // 令a关于w升序排列 int r[MAX_N]; // 并查集 int Find(int x) { ...
- SSM 项目搭建 （IDEA）
好好想了想,还是准备给大家发一个简单的SSM的项目搭建教程. 我觉得通常来说,只是XML的配置文件可能让人头痛了点,其他的倒真不是问题. 不过话说回来,mybatis一直让我觉得用起来不方便.因为数据 ...
- bzoj1040 骑士
Description Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火 ...
- cf1066F Yet Another 2D Walking (贪心+dijkstra)
易证我们走的时候只会从某一层的某端点走向另一端点.然后走向下一层的某端点.. 所以建图然后dijkstra就行了 调了一年以后发现dijkstra写错了 #include<bits/stdc++ ...
- bzoj1008/luogu3197 越狱 (快速幂)
算$m^n-m*(m-1)^{n-1}$,就是总的减去不越狱的,不越狱就每次都选一个和上一个不一样的
- asp.net mvc 全局权限过滤器及继成权限方法
全局权限过滤器 //----------------------------------------------------------------------- // <copyright f ...
- ASP.NET MVC验证框架中关于属性标记的通用扩展方法
http://www.cnblogs.com/wlb/archive/2009/12/01/1614209.html 之前写过一篇文章<ASP.NET MVC中的验证>,唯一的遗憾就是在使 ...