JavaScript操作Select选项总结
"JavaScript特殊控件操作学习笔记" 在JavaScript和jQuery中,处理HTML中的特殊控件,如Select,是一项常见的任务。以下是一些关于如何选择、设置和删除Select选项的关键知识点。 一、获取Select选中项的Text和Value 1. 当Select的选项发生变化时,可以使用`change()`事件监听: ```javascript $("#select_id").change(function() { // 在这里编写代码 }); ``` 2. 获取选中项的Text: ```javascript var checkText = $("#select_id").find("option:selected").text(); // 或者 var checkText = $("#select_id").children("option:selected").val(); ``` 3. 获取选中项的Value: ```javascript var checkValue = $("#select_id").val(); ``` 4. 获取选中项的索引: ```javascript var checkIndex = $("#select_id").get(0).selectedIndex; ``` 5. 获取Select最后一个选项的索引: ```javascript var maxIndex = $("#select_id option:last").attr("index"); ``` 二、设置Select选项 1. 设置Select的选项索引为1: ```javascript $("#select_id").get(0).selectedIndex = 1; ``` 2. 选择第一个选项: ```javascript $('#select_id option:first').prop("selected", true); ``` 3. 根据Text选择选项: ```javascript $("#select_id option[text='jQuery']").attr("selected", true); ``` 4. 根据Value选择选项: ```javascript $("#select_id option[value='jQuery']").attr("selected", true); ``` 三、设置Select的Value 1. 设置Select的Value为4: ```javascript $("#select_id").val(4); ``` 2. 选择第2个选项(索引从0开始): ```javascript $("#select_id option").eq(1).attr("selected", true); ``` 四、删除Select选项 1. 删除指定索引的选项: ```javascript $("#select_id option:eq(index)").remove(); // 将“index”替换为实际索引 ``` 2. 删除所有选项: ```javascript $("#select_id").empty(); ``` 3. 删除匹配特定条件的选项: ```javascript $("#select_id option[value='someValue']").remove(); // 删除value为'someValue'的选项 ``` 以上就是JavaScript和jQuery中处理Select控件的一些基本操作,包括获取选中项的信息、设置选项以及删除选项的方法。这些技能对于前端开发人员来说是非常基础且实用的。在实际开发中,根据具体需求,可以通过组合这些方法实现更复杂的交互逻辑。
jQuery获取Select选择的Text和Value:
1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
var checkText=$("#select_id").children("option:selected").val(); //获取select选择的值,.text(),获取选择的Text
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery设置Select选择的Text和Value:
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中(有时候不起作用),应该这样写
$('#select_id option:first').prop("selected",true);
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
$("#select_id option[value='jQuery']").attr("selected", true); //设置Select的value值为jQuery的项选中
//推荐用下面
2. $("#select_id ").val(4); //设置Select的Value值为4的项选中
$("#select_id option").eq(1).attr("selected",true); //prop也可以
// $("#selectedId").val("3");
$("#selectedId").find("option").eq(2).attr("selected","selected")
jQuery添加/删除Select的Option项:
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 等价 :option:first
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
7. $("#SelectID").remove(); //删除所有项
全选/取消
jQuery.attr 获取/设置对象的属性值,如:
$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态(是否选中)
$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true
$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的<img>src值
下面的代码是获取上面实例中选中的checkbox的value值:
<script type="text/javascript">
var arrChk=$("input[name='chk_list'][checked]");
$(arrChk).each(function(){
window.alert(this.value);
});
});
</script>
1,获取checkbox的value
$("#checkboxID").value或$("input[type='checkbox']").eq(n).attr("checked").value
2,设置选中项
$("input[type='checkbox']").eq(1).attr("checked")//设置第一个checkbox为选中的项
3,删除所有checkbox
$("input[type='checkbox']").remove()
4,checkbox方法
$(document).ready(function() {
var check = $("input[type='checkbox']");
check.each(function(n) {
check.eq(n).bind("click", function() {
if (check.eq(n).attr("checked") != false) {
var value = check.eq(n).val();
alert(value);
剩余8页未读,继续阅读
- 粉丝: 2
- 资源: 11
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展