jquery的select元素和option的相关操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--添加jquery-->
<script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
createSelect("addSel");
addOption("addSel", "first", "第一个数据");
addOption("addSel", "secord", "第二个数据");
addOption("addSel", "three", "第三个数据");
addOption("addSel", "four", "第四个数据");
addOption("addSel", "fives", "第五个数据");
removeOneByIndex("addSel", 0);
removeOneByValue("addSel", "three");
//****************以验证不可以根据text值取得option元素***********************
//removeOneByText("addSel", "第三个数据");
//****************以验证不可以根据text值取得option元素***********************
//removeAll("addSel"); //删除select元素的所有options
//removeSelect("addSel"); //删除select元素；
setDefaultByValue("addSel", "four"); //设置option的默认值
//添加一个option更改事件 调用自己写的方法
$("#addSel").change(function () {
alert("旧文本：" + getOptionText("addSel") + " 旧Value：" + getOptionValue("addSel"));
editOptions("addSel", "新文本", "新Value"); //注意：不传value值的时候 value值默认为text的值
alert("新文本：" + getOptionText("addSel") + " 新Value：" + getOptionValue("addSel"));
})
})
//动态创建带id的select
function createSelect(id) {
$("body").append("<select id="+id+"></select>");
}
//根据select的id 添加选项option
function addOption(selectID,value,text) {
//根据id查找select对象，
var obj = $("#" + selectID + "");
$("<option></option>").val(value).text(text).appendTo(obj);
}
//根据value的值设置options默认选中项
function setDefaultByValue(selectID,value) {
var obj = $("#" + selectID + "");
obj.val(value);
}
//获得选中的Option Value；
function getOptionValue(selectID) {
//var obj = $("#" + selectID + " option:selected").val();
//上面和下面两种都可以
var obj = $("#" + selectID + "").find("option:selected").val();
return obj;
}
//获得选中的option Text;
function getOptionText(selectID) {
//var obj = $("#" + selectID + " option:selected").text();
//上面和下面两种都可以
var obj = $("#" + selectID + "").find("option:selected").text();
return obj;
}
//修改选中的option
function editOptions(selectID, newText, newValue) {
var obj = $("#" + selectID + "").find("option:selected");
obj.val(newValue).text(newText);
}
//根据 index 值删除一个选项option
function removeOneByIndex(selectID, index) {
var obj = $("#" + selectID + " option[index=" + index + "]");
obj.remove();
}
//根据 value值删除一个选项option
function removeOneByValue(selectID, text) {
var obj = $("#" + selectID + " option[value=" + text + "]");
obj.remove();
}
//****************以验证不可以根据text值取得option元素***********************
//根据text值删除一个选项option 感觉不可用 真的
//function removeOneByText(selectID, text) {
//var obj = $("#" + selectID + " option[text=" + text + "]");
//obj.remove();
//}
//****************以验证不可以根据text值取得option元素***********************
//删除所有选项option
function removeAll(selectID) {
var obj = $("#" + selectID + "");
obj.empty();
}
//删除select
function removeSelect(selectID){
var obj = $("#" + selectID + "");
obj.remove();
}
</script>
</head>
<body>
</body>
</html>
jquery的select元素和option的相关操作的更多相关文章
- javaScript的select元素和option的相关操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...
- jQuery获取Select元素
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
- jquery关于Select元素的操作
jQuery获取Select元素,并选择的Text和Value: $("#select_id").change(function(){//code...}); ...
- jQuery获取select元素选择器练习
jQuery获取Select选择的Text和Value:语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...
- jQuery获取select中全部option值
<select id="language"> <option value="">请选择</option> <optio ...
- jquery 让select元素中的某个option被选中
jquery 操作select 取值,设置选中值 博客分类: javaScript selecttextvalue取值设置选中值 比如 <select class="type" ...
- pc端美化select，jquery获取select中的option的text值
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Jquery获取select选中的option的文本信息
注意:以下用的$(this)代表当前选中的select框 第一种: $(this).children("option:selec... ...查看全文
随机推荐
- JavaScript 概览 更新时间2014-0414-0837
一些概念 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM Level1规划文档结构:DOM Level2扩展了对鼠标和用户界面事件等的支持:DOM Level3支持了XML1 ...
- java 哈希码
加入新的元素到数组中 /** * Append the given object to the given array, returning a new array * consisting of t ...
- Segments - POJ 3304 (判断直线与线段是否相交)
题目大意:给出一些线段,然后判断这些线段的投影是否有可能存在一个公共点. 分析:如果这些线段的投影存在一个公共点,那么过这个公共点作垂线一定与所有的直线都想交,于是题目转化成是否存在一个直线可以经 ...
- SharePoint 2013的100个新功能之网站管理（二）
一:SharePoint 2013的网站策略 网站策略指的是自动关闭或删除网站的条件.有四个选项:不自动关闭或删除网站.自动删除网站.自动关闭并删除网站和运行一个工作流来关闭.删除网站. 二:新的主题 ...
- js中return、return true、return false的区别
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
- php开发工具zendstudio13破解补丁
io? Intelligent Code Editor Robust Debugging Capabilities Eclipse Ecosystem Mobile: AngularJS, Ioni ...
- Android color(颜色) 在XML文件和java代码中
Android color(颜色) 在XML文件和java代码中,有需要的朋友可以参考下. 1.使用Color类的常量,如: int color = Color.BLUE;//创建一个蓝色 是使用An ...
- wdlinux 编译pdo_mysql
由于项目需要用到pdo 链接数据库 wdlinux在centos6.4下 没有pdomysql模块 ,所以重新编译 有的系统无法使用pdo_mysql 1 重新编译mysql http://www.w ...
- MYSQL 缓存详解 [myownstars] 经典博客
http://blog.itpub.net/15480802/viewspace-755582/ 在服务器级别只提供了query cache,而在存储引擎级别,MyISAM和InnoDB分别引入了ke ...
- python s12 day3
python s12 day3 深浅拷贝 对于 数字 和 字符串 而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个内存地址. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...