jquery操作select取值赋值与设置选中[转]
本节内容:
jquery实现select下拉框的取值与赋值,设置选中的方法大全。
比如<select class="selector"></select>
1、设置value为pxx的项选中
2、设置text为pxx的项选中
这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。
很多时候,中括号的运用可以使得逻辑变得很简单。
3、获取当前选中项的value
4、获取当前选中项的text
这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。
很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。
这在jquery中是非常简单的。
例如:
// 先清空第二个
$(".selector2").empty();
// 实际的应用中,这里的option一般都是用循环生成多个了
var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);
});
Js操作Select大全
判断select选项中 是否存在Value="paraValue"的Item
向select选项中 加入一个Item
从select选项中 删除一个Item
删除select中选中的项
修改select选项中 value="paraValue"的text为"paraText"
设置select中text="paraText"的第一个Item为选中
设置select中value="paraValue"的Item为选中
得到select的当前选中项的value
得到select的当前选中项的text
得到select的当前选中项的Index
清空select的项
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}
// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;
// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项
document.all.objSelect.options.length = 0;
相关文章
- jquery操作select(增加,删除,清空)
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
- jQuery操作Select
- jquery 绑定省份和城市
- 解密jQuery内核 DOM操作
- JQuery实现对html结点的操作(创建,添加,删除)
- jquery移动端一个按钮两个事件
- 第二百零七节,jQuery EasyUI,MenuButton(菜单按钮)组件
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
- jQuery动态添加删除与添加表行代码
- jQuery 文档操作 - insertAfter() ,insertBefore(),after(),before() 方法
- jQuery:获取浏览器中的分辨率
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
- 前端-jQuery-操作标签-属性操作
- [jQuery] $.map, $.each, detach() , $.getJSOIN()
- jQuery温习篇---强大的JQuery选择器
- JQuery选择器总结
- 45. 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
- jQuery下table操作示例(附案例源码)
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- JQuery 选择器总结
- jQuery Easy UI Resizable(调整大小)组件
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
- jQuery Ajax 操作函数
- jQuery 库 - 特性