老裴帮助关于Jquery操作选择框的小练习
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Select框的操作</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript"
src="<%=path%>/js/jquery/jquery-1.3.2.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
});
/**
选择框所有的内容
*/
function selectAllContent(){
var objSelect = $("#S_1 > option");
objSelect.each(function(){
var val= $(this).val();
var text = $(this).html();
var map = val+":"+text;
alert(map);
});
}
/**
选定内容
*/
function selectContent(){
var objSelect = $("#S_1 > option");
var objSelected = $("#S_1 > option:selected");
objSelected.each(function(){
var val= $(this).val();
var text = $(this).html();
var index = objSelect.index($(this));
var map = index+":"+val+":"+text;
alert(map);
});
}
/**
动态添加选择内容
*/
function addSelect(){
$("#S_1").addOption('珠海','ZH');
}
/**
动态删除选择内容
*/
function delSelect(){
$("#S_1").removeSelected();
}
/**
清除select中的所有项
*/
function clearAll(){
$("#S_1").get(0).options.length=0;
}
/**
得到select项的个数
*/
jQuery.fn.size = function(){
return jQuery(this).get(0).options.length;
}
function getOptionLength(){
var objSelect = $("#S_1").size();
alert(objSelect+"个可供选择项");
}
/**
获得选中项的索引
*/
jQuery.fn.getSelectedIndex = function(){
return jQuery(this).get(0).selectedIndex;
}
function getSelectedIndex(){
var index = $("#S_1").getSelectedIndex();
alert("此选项的索引是："+index);
}
/**
获得当前选中项的文本
*/
jQuery.fn.getSelectedText = function(){
if(this.size() == 0){
return "下拉框中无选项";
}else{
var index = this.getSelectedIndex();
return jQuery(this).get(0).options[index].text;
}
}
function getSelectText(){
var text = $("#S_1").getSelectedText();
alert("您选中的是:"+text);
}
/**
获得当前选中项的值
*/
jQuery.fn.getSelectedValue = function(){
if(this.size() == 0){
return "下拉框中无选项";
}else{
return jQuery(this).val();
}
}
function getSelectVal(){
var text = $("#S_1").getSelectedValue();
alert("您选中的是:"+text);
}
/**
设置select中值为value的项为选中
*/
jQuery.fn.setSelectedValue = function(value){
jQuery(this).get(0).value = value;
}
/**
设置select中文本为text的第一项被选中
*/
jQuery.fn.setSelectedText = function(text){
var isExist = false;
var size = this.size();
for(var n=0;n< size; n++){
if( jQuery(this).get(0).options[n].text == text){
jQuery(this).get(0).options[n].selected = true;
isExist = true;
break;
}
}
if(!isExist){
alert("下拉框中不存在该项");
}
}
/**
设置选中指定索引项
*/
jQuery.fn.setSelectedIndex = function(index){
var count = this.size();
if(index >= count || index < 0 ){
alert("选中项索引超出范围");
}else{
jQuery(this).get(0).selectedIndex = index;
}
}
/**
判断select项中是否存在值为value的项
*/
jQuery.fn.isExistItem = function(value){
var isExist = false;
var size = this.size();
for(var n=0; n<size; n++){
if(jQuery(this).get(0).options[n].value == value){
isExist = true;
break;
}
}
return isExist;
}
/**
向select中添加一项，显示内容为text，值为value,如果该项值已存在，则提示
*/
jQuery.fn.addOption =function(text,value){
if(this.isExistItem(value)){
alert("待添加项的值已存在");
}else{
jQuery(this).get(0).options.add(new Option(text,value));
}
}
/**
向select中添加一项，显示内容为text，值为value,如果该项值已存在，则提示
*/
jQuery.fn.removeItem = function(value){
if(this.isExistItem(value)){
var size = this.size();
for(var n=0;n<size;n++){
if(jQuery(this).get(0).options[n].value == value){
jQuery(this).get(0).remove(n);
break;
}
}
}else{
alert("待删除项索引超出范围");
}
}
/**
删除select中指定索引的项
*/
jQuery.fn.removeIndex = function (index){
var size = this.size();
if(index >= size || index <0 ){
alert("待删除项索引超出范围");
}else{
jQuery(this).get(0).remove(index);
}
}
/**
删除select中选定的项
*/
jQuery.fn.removeSelected = function()
{
var index = this.getSelectedIndex();
this.removeIndex(index);
}
/**
选中项出发事件
*/
function selectedChange(){
var objSelect = jQuery("#S_1");
objSelect.change(function(){
var index = objSelect.getSelectedIndex();
var val = objSelect.val();
var text = objSelect.get(0).options[index].text;
window.open("http://www.baidu.com","_blank","");
});
}
</script>
<body>
<fieldset>
<legend>
Select框的操作
</legend>
<span> <input type="button" id="btn1" value="选择框所有的内容"
onclick="selectAllContent()"> <input type="button"
id="btn1" value="选定内容" onclick="selectContent()"> <input
type="button" id="btn1" value="动态添加选择内容" onclick="addSelect()">
<input type="button" id="btn1" value="动态删除选择内容" onclick="delSelect()">
<input type="button" id="btn1" value="清除所有项" onclick="clearAll()">
<input type="button" id="btn1" value="选择项的个数" onclick="getOptionLength()">
<input type="button" id="btn1" value="选中项的索引 " onclick="getSelectedIndex()">
<input type="button" id="btn1" value="选中项的文本" onclick="getSelectText()">
<input type="button" id="btn1" value="选中项的值" onclick="getSelectVal()">
<input type="button" id="btn1" value="选中项的触发事件" onclick="selectedChange()">
</span>
<br>
<span style="">城市:</span>
<span> <select name="S_1" id="S_1" style="width: 100px;">
<option value="BJ">
<font color="red">北京</font>
</option>
<option value="SH">
上海
</option>
<option value="SJZ">
石家庄
</option>
</select> </span>
</fieldset>
</body>
</html>