jQuery动态添加删除select项

时间:2022-11-07 12:49:12
// 添加
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项的更多相关文章

  1. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  2. jquery动态添加删除div--事件绑定&comma;对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  3. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  4. jquery动态添加&sol;删除 tr&sol;td

    <head runat="server"> <title></title> <!--easyui --> <link rel= ...

  5. ASP&period;NET&plus;ashx&plus;jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  6. Jquery动态添加&sol;删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Jquery动态添加 删除 操作实现

    这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(&quot ...

  8. 浏览器后退按钮导致jquery动态添加的select option值丢失的解决方法

    监控浏览器返回功能 判断浏览器返回功能 禁用浏览器的后退按钮 JS禁止浏览器后退键 http://volunteer521.iteye.com/blog/830522/ 浏览器返回功能 判断上一页面来 ...

  9. JS &amp&semi; JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

随机推荐

  1. &lt&semi;&lt&semi;Exceptional C&plus;&plus;&gt&semi;&gt&semi; notes

    - class Complex { public: ) : real_(real), imaginary_(imaginary) { } Complex& operaor+=(const Co ...

  2. libcurl 函数curl&lowbar;easy&lowbar;perform在release下崩溃的问题

    今天遇到一个很奇怪的问题: 工程中用到了libcurl, debug可以正常运行,release每次都崩溃,断到curl_easy_perform这一行.堆栈中也得不到有用信息,于是GOOGLE一番, ...

  3. 048医疗项目-模块四:采购单模块—采购单受理(Dao&comma;Service&comma;Action三层)

    需求: 我们之前把采购单交给监督单位审核了,审通过的采购单就要受理.供货商决定采购单发不发货. 说明: 我们要查的就是登录的供货商的要提供的采购药品,我们查看的是采购单详细表,至于查询条件我们用的是就 ...

  4. 【转】安装Intel HAXM为Android 模拟器加速,30秒内启动完成

    http://www.cnblogs.com/Li-Cheng/p/4351966.html http://www.cnblogs.com/csulennon/p/4178404.html https ...

  5. linux它SQL声明简明教程---WHERE

    我们并不一定必须注意,每次格里面的信息是完全陷入了.在很多情况下,我们需要有选择性地捕捞数据.对于我们的样本.我们可以只抓住一个营业额超过 $1,000 轮廓. 做这个事情,我们就须要用到 WHERE ...

  6. Cngigure和BUS实现远端配置

    1 server依赖 <?xml version="1.0" encoding="UTF-8"?><project xmlns="h ...

  7. js&lowbar;1&lowbar;变量类型

    js中有哪些变量类型? 数字(包括int和float),字符串,数组(字典,js没有字典类型,把字典看成一个对象) 如何把字符转成数字呢? obj.parseInt()         //  转化成 ...

  8. Linkin大话PC常用快捷键

    不管是不是程序员,常用的键盘的快捷键还是要会的,以下整理一些最常用的也比较重要的PC快捷键. 复制:CTRL+C 剪切:CTRL+X 粘贴:CTRL+V 全选:CTRL+A 撤销键:CTRL+Z 切换 ...

  9. 『集群』002 Slithice 集群配置工具 的使用

    Slithice 集群配置工具 的使用 Slithice集群配置工具 主界面 在测试 Slithice 的 Demo 中,我配置了 7个服务端: 一个 WCF 的 *服务端: 两个 WCF 的 成员 ...

  10. final link failed&colon; Nonrepresentable section on output

    编译live555的时候遇到了这个问题,前面的编译没有问题,是在链接的时候出现的,在网上搜索说是缺少 libstdc++ 库.于是,安装之 #sudo apt-get install  libstdc ...