遍历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的更多相关文章

  1. JS 遍历JSON中每个key值

    JS 遍历JSON中的每个key值,可以按键值对进行存储: var myVar = { typeA: { option1: "one", option2: "two&qu ...

  2. 通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学

    首发于:Aardio通过遍历JSON键值对获取包含某字符串的键的值_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=429 ...

  3. js遍历json对象

    原生js遍历json对象 遍历json对象: 无规律: <script> var json = [ {dd:'SB',AA:'东东',re1:123}, {cccc:'dd',lk:'1q ...

  4. JS常用的获取值和设值的方法

    1. input 标签<input type="text" name="username" id="name"/> 1) 获取i ...

  5. 使用js 在IE和火狐firfox 里动态增加select 的option

    使用js 在IE和火狐firfox 里动态增加select 的option <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition ...

  6. js 获取json对象的Key、value（js遍历json对象的key和value）

    <script type="text/javascript"> getJson('age'); function getJson(key){ "," ...

  7. js遍历json数据

    先看看json返回的数据结构: 我需要遍历取出bookreno   与  title  加载到页面容器中去 首先我要取到 recommendedBookList  字典结构数据,然后遍历反射到相应对象 ...

  8. 如何遍历json属性和动态添加属性

    var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss', hello:function (){ for(var i=0;i< ...

  9. js遍历json的key和value

    遍历json对象: 无规律: <script> var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}]; for(var i ...

随机推荐

  1. PAT 甲级 1110 Complete Binary Tree

    https://pintia.cn/problem-sets/994805342720868352/problems/994805359372255232 Given a tree, you are ...

  2. Ubuntu16解锁root

    administrator@rgqancy:~$ sudo passwd -u root [sudo] administrator 的密码: 对不起,请重试. [sudo] administrator ...

  3. Xmind 8 pro 软件破解版

    转载地址:https://blog.csdn.net/qq_16093323/article/details/80967867 Xmind是一款非常专业的思维导图软件,收费好几百元,不过还是很多用户, ...

  4. python自动化之爬虫原理及简单案例

    [爬虫案例]动态地图里的数据如何抓取:以全国PPP综合信息平台网站为例  http://mp.weixin.qq.com/s/BXWTf5hmq8vp91ZvgaphEw [爬虫案例]动态页面的抓取! ...

  5. 苹果ATS 豁免摆乌龙？

    现象 我们的App已经完成了NA部分的ATS适配.网页端由于有使用到第三方的页面,所以开启了网页的豁免权限.关于如何开启豁免及方法,可以参考喵神的Blog最终,我们的适配参数为: NSAllowsAr ...

  6. 【洛谷】NOIP2018原创模拟赛DAY1解题报告

    点此进入比赛 T1:小凯的数字 题意:给定q个l,r,求l(l+1)(l+2)...(r-1)r模9的结果 很显然,这是道考验数(运)学(气)的题目 结论:输出\((l+r)*(r-l+1)\over ...

  7. 【BZOJ1560】[JSOI2009]火星藏宝图（贪心，动态规划）

    [BZOJ1560][JSOI2009]火星藏宝图(贪心,动态规划) 题面 BZOJ 洛谷 题解 既然所有的位置的权值都大于\(0\),那么就可以直接贪心,按照行为第一关键字,列为第二关键字,来转移. ...

  8. BZOJ 2226 [Spoj 5971] LCMSum 最大公约数之和 | 数论

    BZOJ 2226 [Spoj 5971] LCMSum 这道题和上一道题十分类似. \[\begin{align*} \sum_{i = 1}^{n}\operatorname{LCM}(i, n) ...

  9. BZOJ4830 [Hnoi2017]抛硬币 【扩展Lucas】

    题目链接 BZOJ4830 题解 当\(a = b\)时,我们把他们投掷硬币的结果表示成二进制,发现,当\(A\)输给\(B\)时,将二进制反转一下\(A\)就赢了\(B\) 还要除去平局的情况,最后 ...

  10. 解题：SPOJ 3734 Periodni

    题面 按列高建立笛卡尔树,转成树上问题...... 笛卡尔树是什么? 它一般是针对序列建立的,是下标的BST和权值的堆(即中序遍历是原序列连续区间,节点权值满足堆性质),这里不讲具体怎么建树(放在知识 ...