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

摘要:
遍历json数组并动态添加选项进行选择,然后直接编码。重要部件有注释˂!

遍历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="http://t.zoukankan.com/lib/zepto.min.js"></script>
    <script type="text/javascript" src="http://t.zoukankan.com/lib/jquery-1.9.1.min.js"></script>
    <title>任务发布</title>
</head>
<body>
<form method="post" action="">
    <div   style="margin-top: 30px">项目名称</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <select   name="pro_id" id="sel">

            </select>
        </div>
    </div>
    <div   style="margin-top: 30px">任务名称</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input   type="text" placeholder="请输入任务名称" name="task_name"/>
            </div>
        </div>
    </div>
    <div   style="margin-top: 30px">任务内容</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea   placeholder="请输入内容" rows="7" name="task_content"></textarea>
            </div>
        </div>
    </div>
    <div   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   type="datetime-local" value="" placeholder="" name="task_time"/>
            </div>
        </div>
    </div>
    <div   style="margin-top: 30px">任务级别</div>
    <div class="weui-cells weui-cells_radio">
        <label   for="x11">
            <div class="weui-cell__bd">
                <p>高</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio"   name="radio1"   value="2"/>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label   for="x12">
            <div class="weui-cell__bd">
                <p>中</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" name="radio1"     checked="checked" value="1"/>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label   for="x13">
            <div class="weui-cell__bd">
                <p>低</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" name="radio1"     checked="checked" value="0"/>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
    </div>
    <div   style="margin-top: 30px ;padding-bottom: 100px">
        <input   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》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Shiro权限管理框架(五):自定义Filter实现及其问题排查记录harbor 安装与部署下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

mybatis3 @SelectProvider

mybatis3中增加了使用注解来配置Mapper的新特性,本篇文章主要介绍其中几个@Provider的使用方式,他们是:@SelectProvider、@UpdateProvider、@InsertProvider和@DeleteProvider。MyBatis 3 User Guide中的最后一章描述了注解的简单用法,但是对于这几个Provider的具...

Oracle中索引的使用 索引性能优化调整

索引是由Oracle维护的可选结构,为数据提供快速的访问。准确地判断在什么地方需要使用索引是困难的,使用索引有利于调节检索速度。 当建立一个索引时,必须指定用于跟踪的表名以及一个或多个表列。一旦建立了索引,在用户表中建立、更改和删除数据库时, Oracle就自动地维护索引。创建索引时,下列准则将帮助用户做出决定:        1) 索引应该在SQL语句的...

ORACLE 11G 闪回技术(闪回数据库、表、回收站)

ORACLE 11G 闪回技术(闪回数据库、表、回收站) weixin_45389319分类专栏: 数据库 文章标签: 数据库版权闪回数据库就是将数据库回退到过去的一个时间点或scn上,从而实现数据库的恢复,这种恢复不需要通过备份,所以更方便、更快速。该功能不基于撤销数据,而是基于闪回日志。 语法flashback 【standby】 database d...

ASP.NET Core系列:中间件

1. 概述 ASP.NET Core中的中间件是嵌入到应用管道中用于处理请求和响应的一段代码。 2.使用 IApplicationBuilder 创建中间件管道 2.1 匿名函数 使用Run, Map, Use ,MapWhen等扩展方法来实现。 usingMicrosoft.AspNetCore.Builder; usingMicrosoft.AspN...

hive函数之~字符串函数

1、字符串长度函数:length 语法: length(string A)返回值: int说明:返回字符串A的长度 hive> selectlength('abcedfg') fromtableName; 7 2、字符串反转函数:reverse 语法: reverse(string A)返回值: string说明:返回字符串A的反转结果 h...

如何让plsql查询的数据可编辑

plsql允许查询数据可以编辑的条件是必须查询出rowid 在某个表上点击query data 出现的sql语句是 :select * from licence t 在某个表上点击 edit data 出现的sql语句是:select t.*, t.rowid from licence t 说明要编辑必须带有rowid 比如我们查询这样一条语句 selec...