关键在于使用AJAX获取服务器端传来的JSON格式选项列表,然后用jQuery的getJSON()函数解读数据。本例的服务器端用的是Spring MVC ,控制器返回的模型由spring-json view转化为JSON格式,供jQuery使用。
$(document).ready(function(){
//jQuery test
$("a").click(function(event){
alert("如您所见, the link no longer took you to jquery.com");
event.preventDefault();
});
//button test
$('#getName').click(function(){
$.getJSON('hello.htm', function(data) {
//测试嵌套数据{{username:张三},{users:{{username:张三,password:123456},...}}
$('#username').html( data.username );
// $('#password').html(data.users[1].password);
// $('#userId').html(data.users[0].userId);
// $('#roleId').html(data.users[0].roleId);
$('#selectfrom').empty();
var users = data.users;
$.each(users,function(index,value){
// $('#selectfrom').add(value.userId,value.username,false,false);
// $('#selectfrom').add("<option value=value.userId>"+value.username+"</option>");
$("#selectfrom")[0].options.add(new Option(value.username,value.userId,false,false));
});
});
});
});
Spring MVC与AJAX的整合参见:
http://hi.baidu.com/luohuazju/blog/item/ced42801de465309728da55c.html
分享到:
相关推荐
此功能允许开发者向 `<select>` 控件添加新选项。首先,通过 `jsSelectIsExistItem` 函数检查指定的 `value` 是否已存在于 `<select>` 中。如果不存在,则创建一个新的 `<option>` 对象,并将其添加到 `<select>` ...
标题中的“可编辑并自动提示的select控件”指的是在Web开发中,使用特定的JavaScript库或组件,创建一种能够动态提示选项,并且允许用户编辑输入的下拉选择框(Select)控件。这种控件通常用于提高用户体验,让用户...
对于需要在运行时动态添加选项的情况,可以使用JavaScript或jQuery。以下是一个使用JavaScript的例子: ```javascript var dropdown = document.getElementById("dropdownList"); var option = document....
在Web开发中,Select控件是常见的表单元素,用于提供用户选择选项的功能。然而,原生的Select控件在样式和交互上存在局限性,不能满足现代网页设计的需求。为了解决这个问题,开发者常常会使用jQuery等JavaScript库...
mobileSelect控件通过简洁的API和丰富的自定义选项,使得开发者能够轻松地在移动应用中集成高质量的下拉选择功能。 首先,我们来探讨一下mobileSelect的核心特性: 1. **响应式设计**:mobileSelect控件具备良好的...
本项目就是其中的一款,名为“JQ美化select控件”,它具备良好的兼容性和多浏览器支持,包括IE6到IE11、Firefox和Chrome等。 该插件的核心在于使用jQuery库来操作DOM,动态创建和管理一个更具有吸引力的下拉列表。...
在某些情况下,可能需要根据后端数据动态生成或更新`<select>`的选项。这可以通过循环遍历数据,然后调用`add`方法来实现。 5. **禁用和启用选中项** 可以使用`disabled`属性来禁用或启用`<select>`控件或其选项...
在Web开发中,select控件是常用的表单元素,但是在某些情况下,我们需要为select控件添加title提示属性,以便用户更好地理解选项的含义。然而,select控件的title属性在某些浏览器中不生效,例如IE浏览器。这时,...
【标题】"dbgrid select控件"涉及到的是在编程中使用的一种特定的用户界面元素,TDBGridEh,它是数据库应用开发中的一个重要组件。TDBGridEh是EhLib库的一部分,专为Delphi和C++Builder等RAD Studio环境设计。这个...
通过这个" sapui5-select-extension "项目,开发者不仅可以学习到如何扩展SAPUI5的标准控件,还能掌握动态添加选项的实现方式,这对于开发高度定制化的企业级应用是非常有价值的。同时,此项目的源代码可供参考和...
总的来说,"IosSelect控件"为Android开发者提供了一种实现iOS风格下拉选择的便捷途径。理解并掌握上述知识点,将有助于你在项目中有效地运用这个控件,提升应用的整体质量和用户体验。在实际开发过程中,参照提供的...
Bootstrap Dual Listbox是一款基于jQuery和Bootstrap框架的双选列表控件,它为用户提供了便捷的方式来在两个选择框之间同步选项的选取。这个控件尤其适用于需要处理大量可选项目的场景,用户可以轻松地进行批量选择...
4. 如果有动态添加或删除的选项,需要调用`$("#yourSelect").trigger("chosen:updated")`来更新Chosen的内部状态。 通过以上步骤,你可以轻松地在项目中实现select控件的美化,提升用户体验。记住,良好的界面设计...
为了向`<select>`控件添加一个新的选项,我们可以使用以下函数: ```javascript function jsAddItemToSelect(objSelect, objItemText, objItemValue) { if (!jsSelectIsExitItem(objSelect, objItemValue)) { var...
- **远程数据**:`Select2`支持从服务器端动态加载数据,通过AJAX请求获取数据集,这在处理大数据量时非常有用。 - **无限滚动**:当数据集庞大时,`Select2`可以实现分页效果,只显示一部分数据,用户滚动时再...
以下是一些关键的JavaScript方法,用于处理select控件: 1. **判断select选项中是否存在Value="paraValue"的Item** 使用`jsSelectIsExitItem`函数,通过遍历select的options数组并检查每个option的value属性,可以...
5. **动态渲染和交互**:不同于原生的`select`,自定义控件可以实现更丰富的交互效果,例如平滑的动画过渡,自适应屏幕尺寸的变化,甚至可以添加搜索功能,允许用户在下拉列表中搜索特定选项。 6. **响应式设计**:...
在现代网页开发中,操作select控件和option选项是前端开发者必须掌握的基础技能之一。以下内容将详细介绍如何使用JavaScript对select控件中的option选项进行增加、删除、修改和查询操作。 首先,创建一个select元素...
3. **自定义数据源**:你可以通过 AJAX 或 JavaScript 数组为 `Select2` 提供动态数据,使得选项不再局限于静态的 HTML 内容。 4. **可扩展性**:`Select2` 的API允许开发者添加自定义行为,如监听事件、修改默认...
对于多选,`<select>`需要添加`multiple`属性,使得用户可以同时选中多个选项。 接着,我们关注`selectList`的移动功能。这通常涉及到对`<option>`元素的DOM操作,包括改变它们在`<select>`内的位置。在JavaScript...