Jquery Select操作方法集合(转)
$('#test option:first').val();
//最后一个option的值
$('#test option:last').val();
//获取第二个option的值
$('#test option:eq(1)').val();
//获取选中的值
$('#test').val();
$('#test option:selected').val();
//设置值为2的option为选中状态
$('#test').attr('value','2');
//设置第一个option为选中
$('#test option:last').attr('selected','selected');
$("#test").attr('value' , $('#test option:last').val());
$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());
//获取select的长度
$('#test option').length;
//添加一个option
$("#test").append("<option value='9'>ff</option>");
$("<option value='9'>ff</option>").appendTo("#test");
//添除选中项
$('#test option:selected').remove();
//指定项选中
$('#test option:first').remove();
//指定值被删除
$('#test option').each(function(){
if( $(this).val() == '5'){
$(this).remove();
}
});
$('#test option[value=5]').remove();
//获取第一个 Group的标签
$('#test optgroup:eq(0)').attr('label');
//获取第二group下面第 一个option的值
$('#test optgroup:eq(1):option:eq(0)').val();
获 取select中选择的text与value相关的值
获取select选择的Text : var checkText=$("#slc1").find("option:selected").text();
获取select选择的 value:var checkValue=$("#slc1").val();
获取select选择的索引值: var checkIndex=$("#slc1 ").get(0).selectedIndex;
获取select最大的索引值: var maxIndex=$("#slc1 option:last").attr("index");
设置select选 择的Text和Value
设置select索引值为1的项选中:$("#slc1 ").get(0).selectedIndex=1;
设置select的value值为4的项选中: $("#slc1 ").val(4);
设置select的Text值为JQuery的选中:
$("#slc1 option[text='jQuery']").attr("selected", true);
PS:特别要注意一下第三项的使用哦。看看 JQuery的选择器功能是如此地强大呀!
添加删除option项
为 select追加一个Option(下拉项)
$("#slc2").append("<option value='"+i+"'>"+i+"</option>");
为select插入一个option(第一个位置)
$("#slc2").prepend("<option value='0'>请选择</option>");
PS: prepend 这是向所有匹配元素内部的开始处插入内容的最佳方式。
删除select中索引值最大option(最后一个)
$("#slc2 option:last").remove();
删除select中索引值为0的option(第一个)
$("#slc2 option[index='0']").remove();
删除select中value='3'的option
$("#slc2 option[value='3']").remove();
删除select中text='4'的option
$("#slc2 option[text='3']").remove();
一些相关的补充资料:
Jquery操作 Select 简单方便 一个js插件搞定
JQuery select标签操作代码段
来源:http://hi.baidu.com/zlhxinxi83/blog/item/863600270867aa0e918f9d8e.html
分享到:
相关推荐
### Jquery Select操作方法集合脚本之家特别版 在网页开发过程中,经常需要用到对`<select>`元素的操作,包括但不限于获取或设置选中的值、添加或删除选项等。本文将详细介绍如何利用jQuery来高效地完成这些操作。 ...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对Select元素的处理。Select元素是HTML中用于创建下拉列表的标签,通常用于提供多个选项供用户选择。本文将深入探讨jQuery如何操作...
- **图片资源**:`images`目录下的图片文件可能用于美化或增强jQuery Select操作的元素效果。 6. **实际应用** 使用jQuery Select可以实现各种常见的DOM操作,例如改变元素的样式、内容,添加或移除类,响应用户...
这是一个非常有用的jQuery方法,可以移除集合中所有匹配元素的子节点,从而确保在添加新的option之前select列表是空的。 以上就是这篇关于"jquery动态遍历select赋值的实例"中涉及的主要知识点。通过本文的介绍和...
### Jquery 操作 Dom 标签 Select 在前端开发中,使用 ...以上就是使用 jQuery 对 `select`、`radio` 和 `checkbox` 元素进行操作的基本方法和技术要点。希望这些内容能帮助你在实际项目中更加高效地使用 jQuery。
jsTree提供了一系列事件(如`select_node.jstree`、`create_node.jstree`等)和API方法(如`get_json`、`rename_node`等),允许开发者在树操作前后进行逻辑处理,或直接对树结构进行修改。 **六、实际应用案例** ...
5. **闰年下拉选框-生日.html**:这可能是创建一个包含闰年选项的日期选择器,可能用到了HTML的`<select>`元素,结合jQuery来动态生成和更新选项,同时考虑闰年的判断逻辑。 6. **倒计时.html**:倒计时功能是...
6. **性能优化**:jQuery提供了一系列优化DOM操作的方法,使得在大量数据下仍然能够保持良好的性能表现,避免了不必要的DOM遍历和操作。 7. **代码结构清晰**:jQuery的API设计使得代码易于理解和维护,即使对于...
5. **遍历与修改元素属性:** 使用`.each()`方法可以遍历jQuery对象集合,对每个元素进行操作,如设置或获取属性: ```javascript $('input[type="radio"]').each(function() { if ($(this).val() === 'option1')...
接下来,我们可以使用jQuery提供的方法来操作这个`<select>`元素。比如,如果我们想要改变`<select>`的值,可以这样做: ```javascript selectElement.val('newOptionValue'); ``` 这将设置`<select>`的当前选定值...
例如,我们可以使用`$("select#listBoxID").append()`方法向ListBox追加选项,`$("select#listBoxID option:selected")`选取选中的项,而`$("select#listBoxID option").removeAttr("selected")`则可以取消所有选项...
在jQuery中,可以通过各种方法来操作DOM元素的属性值。 - **addClass(cssClass)**: 为匹配元素添加一个或多个类。例如:`$("p").addClass("cssClass");` - **attr()**: 可用于获取或设置一个或多个属性。 - 获取...
虽然C#主要作为后台语言处理业务逻辑和数据库操作,但可以通过AJAX技术(基于jQuery)实现实时的前端交互,无需刷新整个页面。当用户在筛选框中选择条件时,jQuery可以捕获这些事件,然后通过AJAX发送请求到C#编写的...
6. **链式操作**:jQuery的一大特性是链式操作,允许连续调用多个方法。例如,`$("#msg").show().slideUp().delay(500).fadeIn()`在一个动作序列中依次显示、滑动隐藏、延迟500毫秒后淡入元素。 7. **高效选择器**...
- jQuery提供`each()`方法遍历集合并执行函数,如例子所示,可以方便地对集合中的每个元素进行操作,实现批量处理。 - 这些示例展示了如何通过`each()`实现动态改变元素颜色或实现表格的隔行换色效果。 7. **其他...
【管理Jquery包装集】是jQuery使用中的一个重要概念,它是指使用jQuery选择器获取的一组DOM元素的集合,通常被称为jQuery对象。...此外,了解并掌握正确的DOM操作方法,可以帮助开发者编写出更稳定、兼容性更强的代码。
`each`函数是jQuery中非常重要的一个工具,它可以用来遍历任何集合,包括`select`元素的`option`集合。`attr`和`text`方法则用于读取和修改元素属性与内容。 总结来说,jQuery提供了一种优雅的方式来遍历和操作HTML...
新的`InitSelectOptions`函数首先使用JQuery的`.empty()`方法清空Select元素,然后通过JavaScript创建新的Option元素,并使用`.add()`方法将它们添加到Select的`options`集合中。这种做法避免了JQuery对DOM操作的...