jquery对单选框,多选框,文本框等常见操作小结
varsex=$("input[name="sex"]:checked").val(); //获取一组radio被选中项的值
varitem=$("#seloption:selected").text(); //获取select被选中项的文本
varoption_num=$("#sel").val(); //获取select项目索引
$("#sel")[0].selectedIndex=1; //select下拉框的第二个元素为当前选中值
$("input[name="sex"]").get(1).checked=true; //radio单选组的第二个元素为当前选中值
或者对单选框默认选定设置:
$("input[name="sex"]").each(function(){
if($(this).val()==s){
$(this).attr("checked",true);
//this.checked=true;
}
});
Jquery根据value值设置下拉列表(select)默认选中项
<selectname=selonchange="bao(this.options[this.options.selectedIndex].value)">
<optionvalue="">请选择
<optionvalue="1">Item1
<optionvalue="2">Item2
<optionvalue="3">Item3
</select>
<script>
functionbao(s)
{
txt.value=s;
//选择后,让第一项被选中,这样,就有Change啦.
document.all.sel.options[0].selected=true;
}
</script>
<textareaid=txt></textarea>
语法解释:
$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
varcheckText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
varcheckValue=$("#select_id").val(); //获取Select选择的Value
varcheckIndex=$("#select_id").get(0).selectedIndex; //获取Select选择的索引值
varmaxIndex=$("#select_idoption:last").attr("index"); //获取Select最大的索引值
jQuery设置Select选择的Text和Value:
语法解释:
$("#select_id").get(0).selectedIndex=1; //设置Select索引值为1的项选中
$("#select_id").val(4); //设置Select的Value值为4的项选中
$("#select_idoption[text="jQuery"]").attr("selected",true); //设置Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项:
语法解释:
$("#select_id").append("<optionvalue="Value">Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<optionvalue="0">请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_idoption:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_idoption[index="0"]").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_idoption[value="3"]").remove(); //删除Select中Value="3"的Option
$("#select_idoption[text="4"]").remove(); //删除Select中Text="4"的Option
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>jQuerycommon</title>
<metaname="description"content="">
<metaname="keywords"content="">
<linkhref=""rel="stylesheet">
<scripttype="text/javascript"src="jquery-1.8.3.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
//初始化下拉列表--动态添加
varitem=["幼儿园","小学","初中","高中","大学","研究生","博士","硕士"];
varhtml="<optionvalue="0">请选择</option>";
for(vari=0;i<item.length;i++){
html+="<optionvalue=""+(i+1)+"">"+item[i]+"</option>";
}
$("#grade").empty().append(html);
$("#gradeoption[value="0"]").attr("selected","selected");//默认第一项被选中
})
//为Select添加事件,当选择其中一项时触发
functionshowIt(){
varselectText=$("#gradeoption:selected").text();//获取Select选择的Text
//varselectText=$("#grade").find("option:selected").text();//这种方式也可行
varselectValue=$("#grade").val();//获取被选择的value
varselectIndex=$("#grade").get(0).selectedIndex//获取select的索引值
vartext="选择:"+selectText+"\n";
text+="value值:"+selectValue+"\n";
text+="索引值:"+selectIndex;
$("#text").text(text);
}
</script>
</head>
<body>
<div>
<selectname="grade"id="grade"onchange="showIt()"></select>
<p><textareaname="text"id="text"row="30"col="100"></textarea></p>
</div>
</body>
</html>
相关文章
- jQuery中的Ajax
- jQuery——工具及属性(案例)
- jQuery取得select选择的文本与值详解编程语言
- jQuery相关控件的事件操作分解
- jquery常用操作整理基础入门篇
- jquery分页控件实现代码
- jquery中实现简单的tabs插件功能的代码
- jQuery的运行机制和设计理念分析
- jQuery常见操作实现方式和常用函数方法总结
- 在IE浏览器中使用jquery的fadeIn()效果英文字符字体加粗
- jQuery点击后一组图片左右滑动的实现代码
- jQuery+.net实现浏览更多内容(改编php版本)
- jQuery操作checkbox选择(list/table)
- JQuery操作Select的Options的Bug(IE8兼容性视图模式)
- 关于Jquery操作Cookie取值错误的解决方法
- 基于jquery实现一张图片点击鼠标放大再点缩小
- jquery中get和post的简单实例
- 解决jquery操作checkbox火狐下第二次无法勾选问题
- 自己使用js/jquery写的一个定制对话框控件
- jquery左边浮动到一定位置时显示返回顶部按钮
- jQuery学习笔记之Ajax操作篇(一)-数据加载