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填充 好东东
jQuery 是一个广泛使用的 JavaScript 库,简化了 DOM 操作、事件处理、动画以及Ajax交互。`jquery.editable-select` 就是建立在 jQuery 之上,因此在使用前需要确保页面中已经引入了 jQuery。 2. **选择器的增强**...
在本案例中,我们将深入探讨如何使用jQuery和Ajax技术来实现在Select元素中动态添加数据,这通常用于实现交互式的用户界面,如联动下拉菜单。 首先,背景情况是这样的:传统的Select元素通常在页面加载时就包含了...
自己做了三个专门用来操作下拉列表框(select)的jquery插件,一是通过ajax方式填充列表项的FillOptions, 二是下拉列表框的联动插件CascadingSelect,三是手动添加列表项的AddOption插件 具体说明请看这里 ...
总结起来,这个示例展示了如何使用jQuery的Ajax功能与XML数据结合,创建动态联动的下拉列表。通过XML文件存储数据,可以方便地扩展和维护选项。此外,使用事件监听器确保了用户交互时的实时响应,提高了用户体验。这...
3. **处理事件**:当`change`事件触发时,使用jQuery的`$.ajax()`方法向服务器发送请求。请求中包含当前选中的值,服务器根据这些值返回对应的下一级别的选项。 4. **动态更新**:收到服务器响应后,使用jQuery的...
在本文中,我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组,特别是在实现菜单联动下拉框的场景中。SSH1(Spring、Struts、Hibernate)是Java开发中的一个流行MVC框架组合,而jQuery的AJAX功能则...
本文将详细讲解如何使用jQuery的AJAX功能来调用XML文件,并将数据填充到HTML的<select>表单中,以实现全国城市的下拉选择。 首先,我们需要了解jQuery中的$.ajax()函数。这是一个核心的AJAX方法,用于异步向服务器...
在jQuery中,AJAX功能被封装在`$.ajax()`函数里,使得使用更加方便。以下是一个基本的示例,展示了如何使用jQuery AJAX来检查用户名: ```javascript // 捕获用户名输入的事件 $("#username").on("input", function...
Jquery的Ajax回调函数接收到服务器的响应后,解析数据,通常使用JSON.parse()函数。然后,利用这些数据动态更新HTML,显示城市列表。这样,当用户选择一个省份时,县区列表会自动填充并显示出来,整个过程无需刷新...
jQuery是一个强大的JavaScript库,它简化了JavaScript的使用,而Ajax(异步JavaScript和XML)则是一种在不刷新整个页面的情况下更新部分网页的技术。在这个名为“jquery-ajax-app-src”的项目中,我们看到一系列Ajax...
在这个项目中,PHP生成的菜单数据以JSON格式发送到前端,jQuery解析JSON数据并填充到下级Select菜单中。 5. **Select元素**:在HTML中,Select元素用于创建下拉菜单。在这个项目中,我们有三个Select元素,分别对应...
《jQuery Autocomplete 插件参数使用详解》 在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI ...
在"pages.php"文件中,可能包含如下代码逻辑:接收前端发送的页码参数,根据页码查询数据库(例如使用`SELECT * FROM food LIMIT offset, limit`这样的SQL语句),然后将获取的数据转换为JSON格式返回给前端。...
本文主要讲解了如何使用jQuery动态地遍历select元素,并为其赋值。这是一项非常实用的技术,尤其在动态网站开发中,经常会遇到需要根据不同的数据动态更新下拉列表选项的情况。 知识点一:遍历和选择select元素中的...
在"jqueryAjax.zip"压缩包中,应该包含了一个简单的Web项目,项目中的HTML文件包含了jQuery和Ajax的示例代码,PHP文件用于处理Ajax请求,以及可能的CSS和JavaScript文件来提升用户体验。开发者可以解压这个文件,...
本项目“jQuery自动填充表单功能代码”展示了如何使用jQuery UI的Autocomplete实现表单自动填充功能,结合Ajax和本地文本文件来动态提供搜索建议。通过理解Autocomplete的工作原理和配置选项,开发者可以轻松地为...
在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于多级筛选或配置场景。 一、基本概念 1. jQuery:jQuery 是一个高效、简洁而易用的JavaScript库,...
这里,我们可以使用jQuery库简化代码,但也可以使用原生的XMLHttpRequest对象。以下是一个使用jQuery的例子: ```javascript function loadData() { var category = $('#categorySelect').val(); // 获取选中的...