在项目中经常会使用到一个简单的表单元素,那就是下拉列表。但是由于企业的列表项并不是固定的,因此列表项的内容需要到数据库或者接口中取,因此怎样获取,并且能应用到

多个相似的下拉列表就需要思考一下。

我这里将js代码简单贴写:

<script type="text/javascript">

   $(document).ready(function () {
select("plats","plats");
}); function select(id,name){//这样写可以接受多种参数,方便其他地方使用生成下拉列表项
$.ajax({
type: "POST",
url: "getCodeType",
data: { //发送给数据库的数据
codeType: name
},
dataType: 'json',
success: function (data) {
if(data.code == "00"){
$("#"+id+"").empty();
$("#"+id+"").append("<option value=''>请选择</option>")
$.each(data.data, function (data, item) {
$("#"+id+"").append("<option value='" + item.id + "'>" + item.codeName + "</option>")
});
} }
})
}
</script> //相关html
<div class="marRight inlineBlock">
<label>平台:</label>
<select class="sel" name="plats" id="plats">
<option value=''>请选择</option>
</select>
</div>

以上就是简单的应用。

使用js生成下拉列表项的更多相关文章

  1. js动态生成下拉列表

    经常需要用到js动态生成下拉列表的功能,记录下来备用. 示例需求:通过ajax请求,从后台获取用户姓名列表,并添加到下拉列表中.js代码如下: function getNameList(){ //如果 ...

  2. js生成条形码插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. nuxt使用QRCode.js 生成二维码

    QRCode.js 是一个用于生成二维码图片的插件, 官方文档 . 我是在nuxt.js(vue官方的服务端渲染方式)项目里使用的QRCode.js: 第一步:看官方文档: 第二步:下载QRCode. ...

  4. 原生JS实现下拉列表

    1 <div class="list"> 2 <ul> 3 <li> 4 <a href="#">Web部< ...

  5. 利用scrapy-splash爬取JS生成的动态页面

    目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...

  6. JS生成二维码,允许中文转码

    一.使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcod ...

  7. js生成随即字符串

    js生成随即字符串 /* *js生成随即字符串原来如此简单 *toString() radix argument must be between 2 and 36 */ function uuid() ...

  8. 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定

    最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...

  9. js生成[n,m]的随机数

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

随机推荐

  1. RMQ小结

    RMQ——区间最小查询,实际情况往往不是查询最小值,而是查询区间特定信息.一般要求在logn的级别实现查询or修改. RMQ三种实现 1.BIT BIT给我的感觉就是神迹一般数学的巧合,关于它的原理就 ...

  2. 学习Flash 3D图形图像知识的网络资源集合

    1. 华中科技大学计算机学院开放式课程--计算机图形学 http://cs.hust.edu.cn/webroot/courses/csgraphics/index.php 2.深入Stage3D_7 ...

  3. sql server 高可用故障转移(1)

    原文:sql server 高可用故障转移(1) 群集准备工作 个人电脑 内存12G,处理器 AMD A6-3650CPU主频2.6GHz 虚拟机 VMware Workstation 12 数据库  ...

  4. linux命令详解:df命令

    转:http://www.cnblogs.com/lwgdream/p/3413579.html 前言 df命令用来查看系统的space和inode使用情况,也是常用命令之一 使用说明 -a 显示所有 ...

  5. Hive设置参数的三种方法

    Hive提供三种可以改变环境变量的方法,分别是:(1).修改${HIVE_HOME}/conf/hive-site.xml配置文件:(2).命令行参数:(3).在已经进入cli时进行参数声明.下面分别 ...

  6. Storm文档详解

    1.Storm基础概念 1.1.什么是storm? Apache Storm is a free and open source distributed realtime computation sy ...

  7. 转:windows 查找pid并kill进程

    找出占用1099端口的进程,进入windows命令,查看什么进程占用了1099端口 使用命令:netstat -aon|findstr 1099 找出占用1099端口的进程,如下图所示:

  8. EffectiveJava(1) 构造器和静态工厂方法

    构造器和静态工厂方法 **构造器是大家创建类时的构造方法,即使不显式声明,它也会在类内部隐式声明,使我们可以通过类名New一个实例. 静态方法是构造器的另一种表现形式** 主题要点:何时以及如何创建对 ...

  9. mysql误操作后通过binlog恢复,同时解决tmp目录满的问题

    注意: 本文的恢复,并不是基于恢复某个时间点的全量备份后的增量恢复,而是指在现有数据库基础上基于binlog的恢复.适用于较小的数据误操作. 提取日志文件为sql语句: /usr-ext/local/ ...

  10. Nginx限制连接和请求

    一.ngx_http_limit_conn_module对同一个ip/server的连接数做限制.配置指令:limit_conn_zone语法: limit_conn_zone $variable z ...