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
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
随机推荐
- [转载]Android 知识图谱
from: http://blog.csdn.net/xyz_lmn/article/details/41411355
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
- word中创建文本框
word中创建文本框 在插入中点击"文本框"选项卡,例如以下图所看到的: 手工加入自己想要的文本框格式,然后选择所创建的文本框,在工具栏处会发现多了一 ...
- 不可不知的HTML优化技巧
如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript.图像优化.服务器配置,文件压缩或是调整CSS. 很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言 ...
- When to use HTML Helper?
HTML Helper Single or closely related HTML elements(template) Simpler,low level logic for displaying ...
- html 7大知识点
HTML是web前端开发的基础,学习前端的人都是先从html学起的. 关于HTML有一些必备的知识点,这些知识点都是HTML中最基本的内容,也是前端面试最常问的知识点. 1.网页结构网页结构一般都包含 ...
- Yii框架中的CURD操作
<?php $Admin = new Admin(); //查找多条记录,返回二维数组 $Admin->findAll(); $Admin->findAll("id = 2 ...
- Solr4.7从文件创建索引
索引数据源并不会一定来自于数据库.XML.JSON.CSV这类结构化数据,很多时候也来自于PDF.word.html.word.MP3等这类非结构化数据,从这类非结构化数据创建索引,solr也给我们提 ...
- __FILE__,__LINE__,FUNCTION__实现代码跟踪调试(linux下c语言编程 )
root@xuanfei-desktop:~/cpropram/2# cat global.h //头文件#ifndef CLOBAL_H #define GLOBAL_H ...
- 开机时进入 grub rescue>的解决方法
本机是centOS7和win8的双系统 之前在win上把一个空的磁盘空间释放了 可能造成了grub的一些问题 具体还没有研究过 开机后无法正常进入grub引导画面 而是跳出一串英文+ grub res ...