jQuery动态添加删除select项
// 添加
function col_add() {
var selObj = $("#mySelect");
var value="value";
var text="text";
selObj.append("<option value='"+value+"'>"+text+"</option>");
}
// 删除
function col_delete() {
var selOpt = $("#mySelect option:selected");
selOpt.remove();
}
// 清空
function col_clear() {
var selOpt = $("#mySelect option");
selOpt.remove();
}
以上方法为jQuery动态添加、删除和清空select。下面是纯js的写法:
var sid = document.getElementById("mySelect"); sid.options[sid.options.length]=new Option("text","value"); // 在select最后添加一项
其他常用的方法:
$("#mySelect").change(function(){//code...}); //select选中项改变时触发 // 获取select值
var text=$("#mySelect").find("option:selected").text(); //获取Select选中项的Text
var value=$("#mySelect").val(); //获取Select选中项的Value
var value=$("#mySelect option:selected").attr("value"); //获取Select选中项的Value
var index=$("#mySelect").get(0).selectedIndex; //获取Select选中项的索引值,从0开始
var index=$("#mySelect option:selected").attr("index"); //不可用!!!
var index=$("#mySelect option:selected").index(); //获取Select选中项的索引值,从0开始
var maxIndex=$("#mySelect option:last").attr("index"); //不可用!!!
var maxIndex=$("#mySelect option:last").index();//获取Select最大索引值,从0开始
$("#mySelect").prepend("<option value='value'>text</option>"); //Select第一项前插入一项 // 设置select值
//根据索引设置选中项
$("#mySelect").get(0).selectedIndex=index;//index为索引值
//根据value设置选中项
$("#mySelect").attr("value","newValue");
$("#mySelect").val("newValue");
$("#mySelect").get(0).value = value;
//根据text设置对应的项为选中项
var count=$("#mySelect option").length;
for(var i=0;i<count;i++)
{
if($("#mySelect").get(0).options[i].text == text)
{
$("#mySelect").get(0).options[i].selected = true;
break;
}
} // 清空select
$("#mySelect").empty();
jQuery动态添加删除select项的更多相关文章
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- jQuery动态添加删除与添加表行代码
具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...
- jquery动态添加/删除 tr/td
<head runat="server"> <title></title> <!--easyui --> <link rel= ...
- ASP.NET+ashx+jQuery动态添加删除表格
aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...
- Jquery动态添加/删除表格行和列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jquery动态添加 删除 操作实现
这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...
- 浏览器后退按钮导致jquery动态添加的select option值丢失的解决方法
监控浏览器返回功能 判断浏览器返回功能 禁用浏览器的后退按钮 JS禁止浏览器后退键 http://volunteer521.iteye.com/blog/830522/ 浏览器返回功能 判断上一页面来 ...
- JS & JQuery 动态添加 select option
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
随机推荐
- QT 子窗口监听主窗口信号(超级简单,但是好用,比如主窗口移动的时候,子窗口不要再继续处理任务)
MainWindow *ptr = NULL; ptr = (MainWindow*)parentWidget(); connect(ptr, SIGNAL(param_result(bool)), ...
- nexus REST API /artifact/maven/[resolve|redirect] returns unexpected for v=LATEST
Novice nexus oss (2.0.0) user here – getting unexpected results when requesting v=LATEST artifact fr ...
- 最佳实践:Windows Azure 网站 (WAWS)
编辑人员注释:本文章由 Windows Azure 网站团队的项目经理Sunitha Muthukrishna 撰写. Windows Azure 网站 (WAWS) 允许您在 Windows ...
- Swift与Objective-C API的交互
互用性是让 Swift 和 Objective-C 相接合的一种特性,使你能够在一种语言编写的文件中使用另一种语言.当你准备开始把 Swift 融入到你的开发流程中时,你应该懂得如何利用互用性来重新定 ...
- python 面试相关
python单例模式: Python真的需要单例模式吗?我指像其他编程语言中的单例模式. 答案是:不需要! 因为,Python有模块(module),最pythonic的单例典范.模块在在一个应用程 ...
- js动画学习(三)
五.多物体变宽 这里面要注意由于物体变多了,需要给每个物体各配备一个定时器,否则如果只有一个定时器的话,当鼠标在不同物体之间快速滑动时,不同的物体就会出现争抢的现象.所以timer前要加obj. fu ...
- jbpmAPI-1
1.1. What is jBPM? jBPM是一个灵活的业务流程管理(BPM)套件.它是轻量级的,完全开源Apache许可下(分布式),用Java编写的.它允许您模型.执行和监控业务流程的整个生命周 ...
- (Problem 34)Digit factorials
145 is a curious number, as 1! + 4! + 5! = 1 + 24 + 120 = 145. Find the sum of all numbers which are ...
- JS使用合并数组
var arr= [4,5,6]; var arr1 = [7,8,9]; var arr2=[1,2,3]; arr.concat(arr1,arr2); //或者使用Arry.prototype. ...
- asp.net core+ef core
asp.net core+ef core 官方的文档https://docs.asp.net/en/latest/tutorials/first-mvc-app/start-mvc.html 先来看一 ...