`
leon1509
  • 浏览: 538470 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery使用Ajax填充select

阅读更多

function ajaxAddOptions(url, target, id, text){
	target.empty();
	$.getJSON(url, function(json){
		$(json).each(function(i){
			var x = json[i];
			target.append("<option value='" + eval("x." + id) + "'>" + eval("x." + text) + "</option>" );
		})
	});
}

ajaxAddOptions(ctx + "test/testSelect", $("#province"), "code", "name");

 

 

根据需要调用ajaxAddOptions函数,test/testSelect是返回json的url,返回数据的格式如下:

 

[{"class":"ArticleType","id":501,"flag":1,"memo":null,"orderNumber":2,"name":"公告","code":"bulletin"},{"class":"ArticleTy
pe","id":500,"flag":1,"memo":null,"orderNumber":1,"name":"新闻","code":"news"}]

 实现上只返回

[{"name":"公告","code":"bulletin"},{"name":"新闻","code":"news"}]
 这样的数据就行了!
分享到:
评论

相关推荐

    自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充...

    SELECT jquery插件 ajax填充 SELECT jquery插件 ajax填充 SELECT jquery插件 ajax填充 SELECT jquery插件 ajax填充 好东东

    jquery.editable-select

    jQuery 是一个广泛使用的 JavaScript 库,简化了 DOM 操作、事件处理、动画以及Ajax交互。`jquery.editable-select` 就是建立在 jQuery 之上,因此在使用前需要确保页面中已经引入了 jQuery。 2. **选择器的增强**...

    jquery Ajax实现Select动态添加数据

    在本案例中,我们将深入探讨如何使用jQuery和Ajax技术来实现在Select元素中动态添加数据,这通常用于实现交互式的用户界面,如联动下拉菜单。 首先,背景情况是这样的:传统的Select元素通常在页面加载时就包含了...

    自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)

    自己做了三个专门用来操作下拉列表框(select)的jquery插件,一是通过ajax方式填充列表项的FillOptions, 二是下拉列表框的联动插件CascadingSelect,三是手动添加列表项的AddOption插件 具体说明请看这里 ...

    jquery ajax xml 实现select联动

    总结起来,这个示例展示了如何使用jQuery的Ajax功能与XML数据结合,创建动态联动的下拉列表。通过XML文件存储数据,可以方便地扩展和维护选项。此外,使用事件监听器确保了用户交互时的实时响应,提高了用户体验。这...

    jQuery+ajax实现三级级联

    3. **处理事件**:当`change`事件触发时,使用jQuery的`$.ajax()`方法向服务器发送请求。请求中包含当前选中的值,服务器根据这些值返回对应的下一级别的选项。 4. **动态更新**:收到服务器响应后,使用jQuery的...

    SSH1,JQuery的ajax返回json二维数组处理过程

    在本文中,我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组,特别是在实现菜单联动下拉框的场景中。SSH1(Spring、Struts、Hibernate)是Java开发中的一个流行MVC框架组合,而jQuery的AJAX功能则...

    jquery ajax函数调用xml文件select表单全国城市

    本文将详细讲解如何使用jQuery的AJAX功能来调用XML文件,并将数据填充到HTML的&lt;select&gt;表单中,以实现全国城市的下拉选择。 首先,我们需要了解jQuery中的$.ajax()函数。这是一个核心的AJAX方法,用于异步向服务器...

    使用jQuery封装的ajax实现登陆时用户名已存在的提示,注意没有连接数据库去做判断,重点只是实现无刷新的数据交换

    在jQuery中,AJAX功能被封装在`$.ajax()`函数里,使得使用更加方便。以下是一个基本的示例,展示了如何使用jQuery AJAX来检查用户名: ```javascript // 捕获用户名输入的事件 $("#username").on("input", function...

    Sql+Jquery+Ajax实现省市县区无刷新动态联动查询

    Jquery的Ajax回调函数接收到服务器的响应后,解析数据,通常使用JSON.parse()函数。然后,利用这些数据动态更新HTML,显示城市列表。这样,当用户选择一个省份时,县区列表会自动填充并显示出来,整个过程无需刷新...

    jquery-ajax-app-src

    jQuery是一个强大的JavaScript库,它简化了JavaScript的使用,而Ajax(异步JavaScript和XML)则是一种在不刷新整个页面的情况下更新部分网页的技术。在这个名为“jquery-ajax-app-src”的项目中,我们看到一系列Ajax...

    php+jQuery实现的ajax三级Select列表菜单

    在这个项目中,PHP生成的菜单数据以JSON格式发送到前端,jQuery解析JSON数据并填充到下级Select菜单中。 5. **Select元素**:在HTML中,Select元素用于创建下拉菜单。在这个项目中,我们有三个Select元素,分别对应...

    jquery-autocomplete 自动填充插件参数使用说明

    《jQuery Autocomplete 插件参数使用详解》 在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI ...

    jQuery+Ajax+PHP+Mysql实现分页显示数据

    在"pages.php"文件中,可能包含如下代码逻辑:接收前端发送的页码参数,根据页码查询数据库(例如使用`SELECT * FROM food LIMIT offset, limit`这样的SQL语句),然后将获取的数据转换为JSON格式返回给前端。...

    jquery 动态遍历select 赋值的实例

    本文主要讲解了如何使用jQuery动态地遍历select元素,并为其赋值。这是一项非常实用的技术,尤其在动态网站开发中,经常会遇到需要根据不同的数据动态更新下拉列表选项的情况。 知识点一:遍历和选择select元素中的...

    Jquery+Ajax+Php+Mysql异步刷新

    在"jqueryAjax.zip"压缩包中,应该包含了一个简单的Web项目,项目中的HTML文件包含了jQuery和Ajax的示例代码,PHP文件用于处理Ajax请求,以及可能的CSS和JavaScript文件来提升用户体验。开发者可以解压这个文件,...

    jQuery自动填充表单功能代码.zip

    本项目“jQuery自动填充表单功能代码”展示了如何使用jQuery UI的Autocomplete实现表单自动填充功能,结合Ajax和本地文本文件来动态提供搜索建议。通过理解Autocomplete的工作原理和配置选项,开发者可以轻松地为...

    jquery实现select互斥联动

    在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于多级筛选或配置场景。 一、基本概念 1. jQuery:jQuery 是一个高效、简洁而易用的JavaScript库,...

    php ajax select 显示

    这里,我们可以使用jQuery库简化代码,但也可以使用原生的XMLHttpRequest对象。以下是一个使用jQuery的例子: ```javascript function loadData() { var category = $('#categorySelect').val(); // 获取选中的...

Global site tag (gtag.js) - Google Analytics