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

前端技术 2023/09/09 JavaScript

复制代码 代码如下:

// 添加
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();

本文地址：https://www.stayed.cn/item/25183

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案