Jquery+Ajax实现Select动态定数据

最新推荐文章于 2021-08-05 14:55:58 发布

黎明的蜗牛

最新推荐文章于 2021-08-05 14:55:58 发布

阅读量5w

点赞数 8

分类专栏： BS

本文链接：https://blog.youkuaiyun.com/XUJIAOlf/article/details/24982889

版权

本文介绍如何利用Ajax、Jquery从数据库获取数据并转化为Json，进而动态绑定到前端Select元素中。每个选项包含显示文本和value值，方便用户选择及后续操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接着上次的高级查询。下拉框中的字段都是在前台写好的。这对于系统的灵活性来说，是很大的一个弊端。

解决思路：

在数据库中建立类型字典式表。将下拉框需要添加的项，在数据库表里中文、英文名称对应起来。

下拉框动态绑定数据库表中需要字段。

<div id="bgDiv" style="display:none;"></div>
                <a  class="btn-lit" href="javascript:"  οnclick="bgDiv.style.display='inline';advancedQuery.style.display='';addItems()"><span>高级查询</span></a>

在高级查询单击事件中，除了显示查询框外，添加下拉框绑定字段的函数。此处为addItems().

实现代码：

<script type="text/javascript">
//动态绑定下拉框项
        function addItems() {
            $.ajax({
                url: "addItem.ashx/GetItem",    //后台webservice里的方法名称