zoukankan      html  css  js  c++  java
  • 纯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>
    

      

  • 相关阅读:
    新安装的Apache和php,测试可以解析phpinfo,但是无法打开drupal网站
    Drupal7安装注意事项
    drupal7 为视图添加 过滤标准 内容类型
    Drupal网站报错:PDOException: in lock_may_be_available()
    窗口聚合函数与分组聚合函数的异同
    Linux环境下段错误的产生原因及调试方法小结(转)
    gzip 所使用压缩算法的基本原理(选摘)
    InfluxDB使用纪录
    子网掩码解释(转)
    列存的压缩原理学习
  • 原文地址:https://www.cnblogs.com/Im-Victor/p/9298246.html
Copyright © 2011-2022 走看看