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... ...查看全文
随机推荐
- java基础（九）面向对象（四）
这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...
- c++学习笔记（2）类的声名与实现的分离及内联函数
一.类的声名与实现的分离: 和c函数声明与实现分离类似 有.h : 类的声明 .cpp : 类的实现 在在一个类的cpp中应该包含本类的.h文件 在cpp中类的使用:例: //Circle类 //Ci ...
- OpenStack网络的前世今生
声明: 本文转自OpenStack中国社区,原文链接:http://www.openstack.cn/p353.html,作者Joshua,转载请注明. 在OpenStack世界中,网络组件最初叫no ...
- Java程序员必知的8大排序算法
8种排序之间的关系 直接插入排序 (1)基本思想:在要排序的一组数中,假设前面(n-1)[n>=2] 个数已经是排 好顺序的,现在要把第n个数插到前面的有序数中,使得这n个数 也是排好顺序的.如 ...
- Apple Pay强势来袭，开发者应做的事情
"iOS8.1就已经有这个功能了,只是木有现在这么的火,现在的趋势是要火的节奏,因此很多电商平台B2B,P2P,C2C,X2X都有可能需要这个屌丝的付款功能了,在此简单的研究一下." ...
- 平时Error记录
The Windows Firewall on this machine is currently 1.This row already belongs to another table. DataT ...
- hdu 3729 I'm Telling the Truth 二分图匹配
裸的二分图匹配.需要输出方案. #include<cstdio> #include<cstring> #include<vector> #include<al ...
- [RxJS] map vs flatMap
What's the difference between map and flatmap? First, let's show what map is. To show that, I need a ...
- Android 开发中 iBeacon的使用
iBeacon的工作原理是基于Bluetooth Low Energy(BLE)低功耗蓝牙传输技术,iBeacon基站不断向四周发送蓝牙信号,当智能设备进入设定区域时,就能够收到信号.只要满足iBea ...
- 关于 Android 进程保活，你所需要知道的一切
早前,我在知乎上回答了这样一个问题:怎么让 Android 程序一直后台运行,像 QQ 一样不被杀死?.关于 Android 平台的进程保活这一块,想必是所有 Android 开发者瞩目的内容之一.你 ...