纯js遍历json获取值动态为select添加option

遍历json数组 并动态为select添加option

直接上代码，重要部分有注解

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!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>

　　

 

posted @   mingruqi  阅读(4036)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示