jQuery动态添加删除select项(实现代码)

时间:2024-04-22 12:59:04 


// 添加
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&nbsp;option:selected").attr("value"); &nbsp; //获取Select选中项的Value
var index=$("#mySelect").get(0).selectedIndex;   //获取Select选中项的索引值,从0开始
var index=$("#mySelect option:selected").attr("index"); &nbsp; //不可用!!!
var index=$("#mySelect option:selected").index(); &nbsp; //获取Select选中项的索引值,从0开始
var maxIndex=$("#mySelect option:last").attr("index");   //不可用!!!
var maxIndex=$("#mySelect option:last").index();//获取Select最大索引值,从0开始
$("#mySelect").prepend("<option value='value'>text</option>"); &nbsp; //Select第一项前插入一项

// 设置select值
//根据索引设置选中项
$("#mySelect").get(0).selectedIndex=index;//index为索引值&nbsp;
//根据value设置选中项
$("#mySelect").attr("value","newValue");&nbsp;
$("#mySelect").val("newValue");&nbsp;
$("#mySelect").get(0).value = value;&nbsp;
//根据text设置对应的项为选中项
var count=$("#mySelect option").length;&nbsp;
for(var i=0;i<count;i++)&nbsp;
{
    if($("#mySelect").get(0).options[i].text == text)&nbsp;
    {&nbsp;
        $("#mySelect").get(0).options[i].selected = true;&nbsp;
        break;&nbsp;
    }&nbsp;
}&nbsp;

// 清空select
$("#mySelect").empty();

标签:jquery,select,添加
0
投稿

猜你喜欢

  • Golang实现HTTP编程请求和响应

    2024-04-28 09:10:42
  • 网页屏蔽鼠标左右键和键盘按键功能

    2007-10-17 21:30:00
  • Python运算符之Inplace运算符的使用教程

    2021-09-24 11:32:10
  • 如何在nodejs中体验http/2详解

    2024-05-05 09:21:48
  • Git Submodule使用完整教程(小结)

    2022-06-29 21:01:06
  • 基于mpvue的小程序项目搭建的步骤

    2024-05-13 09:12:13
  • 对python中的乘法dot和对应分量相乘multiply详解

    2021-01-14 15:54:58
  • 框架布局慎用元素

    2008-12-21 16:33:00
  • Python实现获取网页内容及自动填表单与登录功能

    2023-10-23 23:55:27
  • 解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题

    2022-12-06 16:17:37
  • CSS控制鼠标样式变换方法

    2007-11-17 07:58:00
  • pandas将list数据拆分成行或列的实现

    2023-12-23 01:58:41
  • Python中字符串对象语法分享

    2022-04-19 14:48:34
  • SQL Server 2005 更改安装路径目录的方法小结

    2024-01-25 12:15:45
  • vue实现拖拽效果

    2024-05-02 16:59:58
  • 实现Python3数组旋转的3种算法实例

    2021-11-12 04:23:10
  • Pandas中Series的属性,方法,常用操作使用案例

    2021-11-22 05:00:47
  • Python聊天室实例程序分享

    2021-01-14 15:35:42
  • HTTP状态码

    2009-09-21 12:46:00
  • 利用Pandas索引和选取数据方法详解

    2023-04-30 23:30:07
  • asp之家 网络编程 m.aspxhome.com