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

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

我这里将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. Java 继承问题 -- 子类是否继承父类的私有属性

    理解一: 子类会继承父类的所有属性和方法,至于能不能直接访问,那就是访问权限的问题了. 例如:父类有个private String name; 属性.子类会继承下来,但子类访问不了,因为是privat ...

  2. PHP的一些陷阱

    1,空Array为False $a = array() if($a == false) { echo "This will be printed ! ! !" ; } 持续更新中

  3. openfire源码研究笔记:对设计模式及原则的学习

    原文:http://blog.csdn.net/jinzhencs/article/details/50522105 一.拦截器的实现 地点:   package org.jivesoftware.o ...

  4. android下socket编程问题:服务器关闭时,客户端发送请求的异常处理

    我用socket分别创建了一个服务器和一个客户端. 当服务器程序运行时,客户端和服务器发送接收数据是OK的. 但是,如果服务器程序关闭以后,客户端仍然发送请求的话,会抛出一个IOException.但 ...

  5. 自动生成logo的网址

    1.https://www.logaster.com/logo/

  6. Qt之QStyledItemDelegate类

    主要用于自定义项的display和编辑: 通常有两个重载函数: // 决定该单元格的推荐大小 virtual QSize sizeHint(const QStyleOptionViewItem &am ...

  7. C++中virtual(虚函数)的用法

    在面向对象的C++语言中,虚函数(virtual function)是一个非常重要的概念. 什么是虚函数: 虚函数是指一个类中你希望重载的成员函数 ,当你用一个  基类指针或引用   指向一个继承类对 ...

  8. pip virtualenv requirements

    pip可以很方便的安装.卸载和管理Python的包.virtualenv则可以建立多个独立的虚拟环境,各个环境中拥有自己的python解释器和各自的package包,互不影响.pip和virtuale ...

  9. 倍福TwinCAT(贝福Beckhoff)基础教程 松下伺服驱动器报错 81.0怎么办

    同步周期有问题   请确认MOTION的伺服周期是一致的,最好跟MAIN主程序也一样,所有周期都是2ms即可     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.yo ...

  10. Flex 自定义打印控件编写

    打印历来是web应用一个比较棘手的问题,幸好flex web应用是运行在flash player上的,flash player可以访问打印机,所以flex 应用可以实现比较强大的打印功能.Flex 自 ...