jquery下拉select控件操作方法分享(jquery操作select)

前端技术 2023/09/03 JavaScript

JQuery获取和设置Select选项方法汇总如下：

代码：

复制代码 代码如下:

$(\"#select_id\").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发
var checkText=$(\"#select_id\").find(\"option:selected\").text();  //获取Select选择的Text
var checkValue=$(\"#select_id\").val();  //获取Select选择的Value
var checkIndex=$(\"#select_id \").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$(\"#select_id option:last\").attr(\"index\");  //获取Select最大的索引值
$(\"#select_id \").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$(\"#select_id \").val(4);   //设置Select的Value值为4的项选中
$(\"#select_id option[text=\'jQuery\']\").attr(\"selected\", true);   //设置Select的Text值为jQuery的项选中

获取select 选中的 text :

复制代码 代码如下:

$(\"#ddlRegType\").find(\"option:selected\").text();

获取select选中的 value:

复制代码 代码如下:

$(\"#nowamagic\").val();

获取select选中的索引:

复制代码 代码如下:

$(\"#nowamagic\").get(0).selectedIndex;

设置select

jQuery添加/删除Select的Option项：

复制代码 代码如下:

$(\"#select_id\").append(\"<option value=\'Value\'>Text</option>\");  //为Select追加一个Option(下拉项)
$(\"#select_id\").prepend(\"<option value=\'0\'>请选择</option>\");  //为Select插入一个Option(第一个位置)
$(\"#select_id option:last\").remove();  //删除Select中索引值最大Option(最后一个)
$(\"#select_id option[index=\'0\']\").remove();  //删除Select中索引值为0的Option(第一个)
$(\"#select_id option[value=\'3\']\").remove();  //删除Select中Value=\'3\'的Option
$(\"#select_id option[text=\'4\']\").remove();  //删除Select中Text=\'4\'的Option

设置select 选中的索引：

复制代码 代码如下:

//index为索引值
$(\"#nowamagic\").get(0).selectedIndex=index;

设置select 选中的value：

复制代码 代码如下:

$(\"#nowamagic\").attr(\"value\",\"Normal\");
$(\"#nowamagic\").val(\"Normal\");
$(\"#nowamagic\").get(0).value = value;

设置select 选中的text:

复制代码 代码如下:

var count=$(\"#nowamagicoption\").length;
  for(var i=0;i<count;i++) 
     {           if($(\"#nowamagic\").get(0).options[i].text == text) 
        { 
            $(\"#nowamagic\").get(0).options[i].selected = true; 

            break; 
        } 
    }

清空 select：

复制代码 代码如下:

$(\"#nowamagic\").empty();

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

转载请注明出处。

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

我的博客

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

我的标签

随笔档案