JS & JQuery 动态添加 select option

逃离我推掉我的手 2022-04-13 14:53 236阅读 0赞

**JS：**

`var` `selid = document.getElementById(``"sltid"``);`

`for``(``var` `i=0; i<10;i++){ ``//循环添加多个值`

`sid.option[i] = ``new` `Option(i,i);`

`}`

`sid.options[sid.options.length]=``new` `Option(``"1"``,``"2"``); ``// 在最后一个值后面添加多一个`

**JQuery：**

`$(``"#selectId"``).append(``"<option value='"``+value+``"'>"``+text+``"</option>"``);`

当然除了这句，还有设置默认选择值、第一个的值、最后一个的值、第N个的值等等的，所以在网上搜了一上：

**jQuery获取Select选择的Text和Value:**

1. $("\#select\_id").change(function()\{//code...\}); //为Select添加事件，当选择其中一项时触发

2. var checkText=$("\#select\_id").find("option:selected").text(); //获取Select选择的Text

3. var checkValue=$("\#select\_id").val(); //获取Select选择的Value

4. var checkIndex=$("\#select\_id ").get(0).selectedIndex; //获取Select选择的索引值

5. var maxIndex=$("\#select\_id option:last").attr("index"); //获取Select最大的索引值

**jQuery添加/删除Select的Option项：**

1. $("\#select\_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)

2. $("\#select\_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

3. $("\#select\_id option:last").remove(); //删除Select中索引值最大Option(最后一个)

4. $("\#select\_id option\[index='0'\]").remove(); //删除Select中索引值为0的Option(第一个)

5. $("\#select\_id option\[value='3'\]").remove(); //删除Select中Value='3'的Option

5. $("\#select\_id option\[text='4'\]").remove(); //删除Select中Text='4'的Option

转载自：[https://www.cnblogs.com/yangxiong/p/6644966.html][https_www.cnblogs.com_yangxiong_p_6644966.html]

[https_www.cnblogs.com_yangxiong_p_6644966.html]: https://www.cnblogs.com/yangxiong/p/6644966.html

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui option 动态添加_layui select动态添加option的实例

html 产品类别轻松融容易融快乐融增加产品类别 js //重新渲染表单 function renderForm()\{ layui.use('for

以你之姓@/ 2023年01月01日 05:57/ 0 赞/ 112 阅读

相关 react antd动态添加＜Select.Option＞

util： //查询枚举数据 export const findEnumData = async (typeName: string) => {

傷城~/ 2022年11月20日 08:21/ 0 赞/ 299 阅读

相关 jquery清空select option

今天在谷歌浏览器上操作select时，发现通过$("\unitlist").empty();，虽然可以把select下的option全部清空，但是select选中显示的文本还残

曾经终败给现在/ 2022年07月14日 01:54/ 0 赞/ 240 阅读

相关 js对select动态添加和删除OPTION

<select id="ddlResourceType" onchange="getvalue(this)"> </select>

系统管理员/ 2022年06月11日 02:45/ 0 赞/ 220 阅读

相关 JS & JQuery 动态添加 select option

JS： `var` `selid = document.getElementById(``"sltid"``);` `for``(``var` `i=0; i<10;i++

逃离我推掉我的手/ 2022年04月13日 14:53/ 0 赞/ 237 阅读

相关 JQuery EasyUI combobox动态添加option

<input class="easyui-combobox" id="rwlb" name="rwlb" style="width:435px" data-option

谁践踏了优雅/ 2022年03月27日 09:35/ 0 赞/ 322 阅读

相关 JavaScript中动态给select添加option

由于前端使用的是layUI，所以使用寻常的方法行不通。需要注意几个点第一个点，需要注册layUI，然后拿到form ![1344234-20190619161632290

我会带着你远行/ 2021年12月24日 17:17/ 0 赞/ 253 阅读

相关 js 操作select和option

[js 操作select和option][js _select_option] 1.动态创建select function createSelect()\{

左手的ㄟ右手/ 2021年09月25日 16:32/ 0 赞/ 301 阅读

相关 js/jQuery select标签获取值/option 选中事件

前言 select标签是常规下拉菜单的第一选择常用的select标签形式 <select id="test" name="">

忘是亡心i/ 2021年09月16日 06:16/ 0 赞/ 541 阅读

相关 javascript动态添加select的option两种方法

!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <scri...

小灰灰/ 2021年02月05日 02:14/ 0 赞/ 721 阅读