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... ...查看全文
随机推荐
- Linux学习笔记9——make和Makefile
一,Makefile的文件名 默认的情况下,make命令会在当前目录下按顺序找寻文件名为“GNUmakefile”.“makefile”.“Makefile”的文件,大部分情况下,make命令都支持m ...
- 逆转字符串leetcode
public class Solution { public String reverseWords(String s) { String ans=reverse(s); String s2[]=an ...
- 关于Marsedit和我的163博客
其实我一开始选择的并不是163的博客,感觉没什么新意,勾不起我的兴趣. 第一个我想写的是CSDN的博客,代码嘛,总要找个专业的网站来写,但是我发现了一个及其让我不爽的事情,我竟然在网页上无法新建一篇日 ...
- [JIT_APP]Android SQLite简介
SQLite介绍 SQLite是一个非常流行的嵌入式数据库,它支持SQL语言,并且只利用很少的内存就有很好的性能.此外它还是开源的,任何人都可以使用它.许多开源项目(Mozilla, PHP, Pyt ...
- ubuntu制作usb启动盘
准备: u盘 iso镜像文件--ubuntu-12.04.2-desktop-amd64.iso 烧盘软件--unetbootin-linux-583 步骤: 格式化u盘 查看u盘信息 #mount/ ...
- [转]Ubuntu上的包管理：dpkg，apt和aptitude
一直以来对于ubuntu的包管理的概念就是apt-get,偶尔手动装个包就是dpkg -i,现在觉得是要系统地了解一下这几个包管理的命令. 原文转自: http://zhouliang.pro/201 ...
- Django中的Ajax
Ajax 很多时候,我们在网页上请求操作时,不需要刷新页面.实现这种功能的技术就要Ajax!(本人定义,不可迷信) jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能,我们仍然 ...
- Eclipse(Myeclipse)安装GoogleGWT
1,下载gpe http://code.google.com/p/googleappengine/并安装. 2,下载gwt http://code.google.com/intl/zh-CN/webt ...
- Oracle、MySql、Sql Server比对
1. 价格 MySql:廉价(部分免费):当前,MySQL採用双重授权(DualLicensed),他们是GPL和MySQLAB制定的商业许可协议.假设你在一个遵循GPL的自由(开源)项目中使用 ...
- [RxJS] Filtering operator: single, race
Single, race both get only one emit value from the stream. Single(fn): const source = Rx.Observable. ...