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... ...查看全文
随机推荐
- 265行JavaScript代码的第一人称3D H5游戏Demo【个人总结1】
本文目的是分解前面的代码.其实,它得逻辑很清楚,只是对于我这种只是用过 Canvas 画线(用过 Fabric.js Canvas库)的人来说,这个还是很复杂的.我研究这个背景天空也是搞了一天,下面就 ...
- CXF Service Interceptor请求,响应报文之控制台输出
一:定义接口 @WebService(targetNamespace = "http://www.unionpay.com/client/appprovider", name = ...
- bzoj 1096 [ZJOI2007]仓库建设(关于斜率优化问题的总结)
1096: [ZJOI2007]仓库建设 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3234 Solved: 1388[Submit][Stat ...
- CSS 概览(CSS2.1)更新时间2014-0406
CSS和HTML结合 <link rel="stylesheet" type="text/css" href="sheet1.css" ...
- 开启gdb调试功能
设置/etc/yum.repos.d/CentOS-Debuginfo.repo,修改[debug项下的enabled的值为1];
- 爬虫技术实战 | WooYun知识库
爬虫技术实战 | WooYun知识库 爬虫技术实战 大数据分析与机器学习领域Python兵器谱-大数据邦-微头条(wtoutiao.com) 大数据分析与机器学习领域Python兵器谱
- tomcat在linux中的启动和查看相关信息
打开终端cd /java/tomcat#执行bin/startup.sh #启动tomcatbin/shutdown.sh #停止tomcattail -f logs/catalina.out # ...
- 获取windows系统信息
在应用程序中,有时需要在界面中显示计算机的硬件信息和进程信息.在.Net中提供了可以查询信息的类.Management类,在程序中添加应用后进行使用. 1 属性 类似的属性介绍可见下面: 属性介绍 根 ...
- DataGridView 添加行 分类: DataGridView 2014-12-07 08:49 263人阅读 评论(0) 收藏
说明: (1)dgvGoods 是DataGridView名 (2)index 是最大行索引 一. DataGridViewRow row = new DataGridViewRow(); int i ...
- 【设计模式 - 17】之中介者模式(Mediator)
1 模式简介 中介者模式的定义: 用一个中介者对象封装一系列的对象交互,中介者使各对象不需要显式地相互作用,从而使耦合松散,而且可以独立地改变它们之间的交互. 中介者模式中的组成部分: 1. ...