遍历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
原文地址：https://www.cnblogs.com/Im-Victor/p/9298246.html