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... ...查看全文
随机推荐
- Hash(4) hashtable,hashmap
首先,我们要知道set是利使用map是实现的,因为只要利用map中的key唯一性就行了. 1.hashmap 和hashtable的区别是什么? 我们可以背出: hashtable线程安全.hash ...
- 原生JavaScript的省市县三级联动
三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...
- redis.config翻译
# Redis configuration file example#redis配置文件范例 # Note on units: when memory size is needed, it is po ...
- [Javascript] Manage Application State with Immutable.js
Learn how Immutable.js data structures are different from native iterable Javascript data types and ...
- SSD -----TLC MLC SLC
SLC缓存什么鬼?TLC评测造假要持续多久 2016.5.5来源:中关村在线 TLC的廉价真的将SSD引入了全面普及的高速公路上,谈到TLC我们更多的理解是TLC的P/E(Program/Erase ...
- Redhat 官方Performance_Tuning_Guide
https://access.redhat.com/documentation/zh-CN/Red_Hat_Enterprise_Linux/6/html/Performance_Tuning_Gui ...
- Customizing the Test Runner
There are several situations where you want to customize Robolectric's test runner to perform some o ...
- Linux命令行编辑快捷键
Linux命令行编辑快捷键: history 显示命令历史列表 ↑(Ctrl+p) 显示上一条命令 ↓(Ctrl+n) 显示下一条命令 !num 执行命令历史列表的第num条命令 !! 执行上一条命令 ...
- java验证码Captcha
import java.awt.Color; import java.io.IOException; import java.util.Random; import javax.servlet.htt ...
- instanceof的用法①
public class typeof1{ private String a="zzw"; public void instance(){ if(a instanceof Stri ...