从 AJAX 填充 jQuery 下拉列表

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸:仿小红书(微服务架构)》 正在持续爆肝中,基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...点击查看项目介绍 ;
  • 《从零手撸:前后端分离博客项目(全栈开发)》 2 期已完结,演示链接: http://116.62.199.48/ ;

截止目前, 星球 内专栏累计输出 63w+ 字,讲解图 2808+ 张,还在持续爆肝中.. 后续还会上新更多项目,目标是将 Java 领域典型的项目都整一波,如秒杀系统, 在线商城, IM 即时通讯,权限管理,Spring Cloud Alibaba 微服务等等,已有 2200+ 小伙伴加入学习 ,欢迎点击围观

在最近的一个项目中,我不得不更正许多将填充 HTML 选择下拉列表的 AJAX 请求 ,在这篇文章中,我将向您展示如何处理 AJAX 请求返回并使用以下内容填充下拉列表的快速片段回复。

首先,我们首先在页面上创建一个带有 ID 属性的 HTML 下拉列表。


 <select id="dropdown"></select>

接下来,我们在 jQuery 中创建一个 AJAX POST 到 urlPath,它将返回我们在 JSON 对象中需要的数据。在返回此 AJAX 请求时,我们将解析响应并在我们将创建的 helpers.buildDropdown 函数中使用它。


 <select id="dropdown"></select>

我们期望来自 AJAX 调用的响应是一个类似于以下数据的 JSON 对象,它可以由多行组成,每行都有一个 ID 列和一个 NAME 列。

ID 列将用于填充选项元素值属性,而 NAME 列将用作选项元素内的文本。您可以拥有任何您想要的字段,但在此示例中,这些是 buildDropdown 函数中预期的列。


 <select id="dropdown"></select>

通过创建数据并以预期的方式返回数据,我们现在可以创建 buildDropdown 函数。首先,我们首先将这个函数放在一个 helpers 命名空间中,因此当你创建更多有用的函数时,你可以继续添加到这个命名空间。

接下来创建函数并传入 3 个参数,结果是 JSON 数据对象,下拉列表是下拉列表的 jQuery 对象,emptyMessage 是我们可以在第一个空选项上使用的文本。


 <select id="dropdown"></select>

相关文章