您的位置：首页 > Web前端 > JQuery

jquery对单选框、多选框、文本框等常见操作

2014-10-14 10:06 696 查看

jquery对单选框、多选框、文本框等常见操作

一、文本框、单选按钮、复选框、相关操作

?
?
Jquery 根据value值设置下拉列表（select）默认选中项



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery common</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//初始化下拉列表--动态添加
var item = ['幼儿园','小学','初中','高中','大学','研究生','博士','硕士'];
var html ="<option value='0'>请选择</option>";
for (var i = 0;i < item.length;i++){
html += "<option value='"+(i+1)+"'>"+item[i]+"</option>";
}
$("#grade").empty().append(html);

$("#grade option[value='0']").attr("selected","selected");//默认第一项被选中
})
//为Select添加事件，当选择其中一项时触发
function showIt(){
var selectText = $("#grade option:selected").text();//获取Select选择的Text
//var selectText = $("#grade").find("option:selected").text();//这种方式也可行
var selectValue = $("#grade").val();//获取被选择的value
var selectIndex = $("#grade").get(0).selectedIndex//获取select的索引值
var text = '选择：'+selectText+"\n";
text +='value值：'+selectValue+"\n";
text +='索引值：'+selectIndex;
$("#text").text(text);
}
</script>
</head>
<body>
<div>
<select name='grade' id='grade' onchange="showIt()"></select>
<p><textarea name='text' id='text' row='30' col='100'></textarea></p>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航