`
cuilji
  • 浏览: 69456 次
  • 性别: Icon_minigender_1
  • 来自: 本溪
社区版块
存档分类
最新评论

为Select控件动态添加选项

阅读更多
关键在于使用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
1
0
分享到:
评论

相关推荐

    select 控件操作大全

    此功能允许开发者向 `&lt;select&gt;` 控件添加新选项。首先,通过 `jsSelectIsExistItem` 函数检查指定的 `value` 是否已存在于 `&lt;select&gt;` 中。如果不存在,则创建一个新的 `&lt;option&gt;` 对象,并将其添加到 `&lt;select&gt;` ...

    可编辑并自动提示的select控件

    标题中的“可编辑并自动提示的select控件”指的是在Web开发中,使用特定的JavaScript库或组件,创建一种能够动态提示选项,并且允许用户编辑输入的下拉选择框(Select)控件。这种控件通常用于提高用户体验,让用户...

    dropdownlist控件 “选项”添加示例 三种方法

    对于需要在运行时动态添加选项的情况,可以使用JavaScript或jQuery。以下是一个使用JavaScript的例子: ```javascript var dropdown = document.getElementById("dropdownList"); var option = document....

    jquery 自定义select控件

    在Web开发中,Select控件是常见的表单元素,用于提供用户选择选项的功能。然而,原生的Select控件在样式和交互上存在局限性,不能满足现代网页设计的需求。为了解决这个问题,开发者常常会使用jQuery等JavaScript库...

    mobileSelect移动端手机下拉控件

    mobileSelect控件通过简洁的API和丰富的自定义选项,使得开发者能够轻松地在移动应用中集成高质量的下拉选择功能。 首先,我们来探讨一下mobileSelect的核心特性: 1. **响应式设计**:mobileSelect控件具备良好的...

    JQ美化select控件

    本项目就是其中的一款,名为“JQ美化select控件”,它具备良好的兼容性和多浏览器支持,包括IE6到IE11、Firefox和Chrome等。 该插件的核心在于使用jQuery库来操作DOM,动态创建和管理一个更具有吸引力的下拉列表。...

    处理html 控件select的js函数

    在某些情况下,可能需要根据后端数据动态生成或更新`&lt;select&gt;`的选项。这可以通过循环遍历数据,然后调用`add`方法来实现。 5. **禁用和启用选中项** 可以使用`disabled`属性来禁用或启用`&lt;select&gt;`控件或其选项...

    js下用层来实现select的title提示属性.docx

    在Web开发中,select控件是常用的表单元素,但是在某些情况下,我们需要为select控件添加title提示属性,以便用户更好地理解选项的含义。然而,select控件的title属性在某些浏览器中不生效,例如IE浏览器。这时,...

    dbgrid select控件

    【标题】"dbgrid select控件"涉及到的是在编程中使用的一种特定的用户界面元素,TDBGridEh,它是数据库应用开发中的一个重要组件。TDBGridEh是EhLib库的一部分,专为Delphi和C++Builder等RAD Studio环境设计。这个...

    sapui5-select-extension:扩展sap.m.select控件以创建添加选项功能

    通过这个" sapui5-select-extension "项目,开发者不仅可以学习到如何扩展SAPUI5的标准控件,还能掌握动态添加选项的实现方式,这对于开发高度定制化的企业级应用是非常有价值的。同时,此项目的源代码可供参考和...

    IosSelect控件

    总的来说,"IosSelect控件"为Android开发者提供了一种实现iOS风格下拉选择的便捷途径。理解并掌握上述知识点,将有助于你在项目中有效地运用这个控件,提升应用的整体质量和用户体验。在实际开发过程中,参照提供的...

    Jquery双向select控件Bootstrap Dual Listbox

    Bootstrap Dual Listbox是一款基于jQuery和Bootstrap框架的双选列表控件,它为用户提供了便捷的方式来在两个选择框之间同步选项的选取。这个控件尤其适用于需要处理大量可选项目的场景,用户可以轻松地进行批量选择...

    美化select控件Jquery chosen

    4. 如果有动态添加或删除的选项,需要调用`$("#yourSelect").trigger("chosen:updated")`来更新Chosen的内部状态。 通过以上步骤,你可以轻松地在项目中实现select控件的美化,提升用户体验。记住,良好的界面设计...

    Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)

    为了向`&lt;select&gt;`控件添加一个新的选项,我们可以使用以下函数: ```javascript function jsAddItemToSelect(objSelect, objItemText, objItemValue) { if (!jsSelectIsExitItem(objSelect, objItemValue)) { var...

    select2控件

    - **远程数据**:`Select2`支持从服务器端动态加载数据,通过AJAX请求获取数据集,这在处理大数据量时非常有用。 - **无限滚动**:当数据集庞大时,`Select2`可以实现分页效果,只显示一部分数据,用户滚动时再...

    js操作select控件的几种方法

    以下是一些关键的JavaScript方法,用于处理select控件: 1. **判断select选项中是否存在Value="paraValue"的Item** 使用`jsSelectIsExitItem`函数,通过遍历select的options数组并检查每个option的value属性,可以...

    美漂亮的实用div+css模仿select下拉控件

    5. **动态渲染和交互**:不同于原生的`select`,自定义控件可以实现更丰富的交互效果,例如平滑的动画过渡,自适应屏幕尺寸的变化,甚至可以添加搜索功能,允许用户在下拉列表中搜索特定选项。 6. **响应式设计**:...

    JS对select控件option选项的增删改查示例代码

    在现代网页开发中,操作select控件和option选项是前端开发者必须掌握的基础技能之一。以下内容将详细介绍如何使用JavaScript对select控件中的option选项进行增加、删除、修改和查询操作。 首先,创建一个select元素...

    下拉框、下拉控件之Select2内含css和js

    3. **自定义数据源**:你可以通过 AJAX 或 JavaScript 数组为 `Select2` 提供动态数据,使得选项不再局限于静态的 HTML 内容。 4. **可扩展性**:`Select2` 的API允许开发者添加自定义行为,如监听事件、修改默认...

    selectList控件 的单选复选移动

    对于多选,`&lt;select&gt;`需要添加`multiple`属性,使得用户可以同时选中多个选项。 接着,我们关注`selectList`的移动功能。这通常涉及到对`&lt;option&gt;`元素的DOM操作,包括改变它们在`&lt;select&gt;`内的位置。在JavaScript...

Global site tag (gtag.js) - Google Analytics