脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → 通过Ajax方式绑定select选项数据

通过Ajax方式绑定select选项数据的实例

 更新时间：2018年08月14日 09:12:55   作者：Luoyger  
今天小编就为大家分享一篇通过Ajax方式绑定select选项数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

问题描述

在编写Web页面的时候常常需要在后端取出数据动态放入select标签中，以供选择。

解决办法

在HTML代码段中只需写入

<select id="select">
<option value="-1">--请选择--</option>
</select>

在JavaScript代码段中写入以下ajax取数据并绑定数据的过程

$.ajax({
 type : "post",
 url : "api/department/list", //此次url改为真正需要的url
 success : function(data, status) {
  $.each(data, function(index, item) {
   $("#select").append( //此处向select中循环绑定数据
 "<option value="+item.id+">" + item.name+ "</option>");
  });
 },
});

最后可通过javaScript语句document.getElementById("select").value获取select标签中被选中的值。

以上这篇通过Ajax方式绑定select选项数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 通过history解决ajax不支持前进/后退/刷新的问题

    通过history解决ajax不支持前进/后退/刷新的问题

    下面小编就为大家带来一篇通过history解决ajax不支持前进/后退/刷新的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 在Ajax中使用get和post所遇到的问题及解决办法

    在Ajax中使用get和post所遇到的问题及解决办法

    本文重点给大家介绍在ajax中使用get和post所遇到的问题及解决办法，及get请求和post请求的区别简单介绍，本文介绍的非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • 揭开AJAX神秘的面纱(AJAX个人学习笔记)

    揭开AJAX神秘的面纱(AJAX个人学习笔记)

    写这个学习笔记，只是记载一下自己的学习经过和体会，把一些学习重点记录下来，以备今后的巩固复习及应用，很多知识点没有详细介绍，所以并不完全适用于初学者，如果你是初学者，最好选择一本AJAX学习的书籍，然后与这篇学习笔记对照学习，效果会更好。
    2009-09-09
  • IE8用ajax访问不能每次都刷新的问题

    IE8用ajax访问不能每次都刷新的问题

    这篇文章主要介绍了IE8用ajax访问不能每次都刷新的问题 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • 聊一聊数据请求中Ajax、Fetch及Axios的区别

    聊一聊数据请求中Ajax、Fetch及Axios的区别

    axios、fetch和ajax的区别在网络上存在很多文章,下面这篇文章也是给大家介绍了关于数据请求中Ajax、Fetch及Axios区别的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • js+ajax处理java后台返回的json对象循环创建到表格的方法

    js+ajax处理java后台返回的json对象循环创建到表格的方法

    这篇文章主要介绍了js+ajax处理java后台返回的json对象循环创建到表格的方法,涉及javascript操作json对象动态创建表格以及基于ajax与后台交互的相关技巧,需要的朋友可以参考下
    2016-08-08
  • 通过Ajax两种方式讲解Struts2接收数组表单的方法

    通过Ajax两种方式讲解Struts2接收数组表单的方法

    使用struts2表单传值，可以传一个或者是作为一个对象的各个属性传，都非常灵活便捷。但是如果我们需要传一个数组并希望struts正确接收，该怎么处理呢？接下来，通过本文给大家介绍通过Ajax两种方式讲解Struts2接收数组表单的方法，需要的朋友可以参考下
    2015-10-10
  • 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    本文给大家介绍基于jquery+ajax+json实现数据分页显示，以及JAVA+JQuery实现异步分页，本文代码简单易懂，非常具有参考价值，感兴趣的朋友一起学习吧
    2015-10-10
  • ECSHOP中实现ajax弹窗登录功能

    ECSHOP中实现ajax弹窗登录功能

    本文主要给大家介绍在ecshop中实现ajax弹窗登录功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下
    2017-03-03
  • 无框架 Ajax分页(原创)

    无框架 Ajax分页(原创)

    最近想做一个Ajax的功能，网上一搜几乎全是基于某某框架的Ajax分页，要么需给页面加上<scriptManager></scriptManager>，要么需引入某dll，要么需使用类似于jquery的框架。
    2009-08-08

最新评论