由于前端使用的是layUI,所以使用寻常的方法行不通。需要注意几个点
第一个点,需要注册layUI,然后拿到form
第二个点,取消异步请求
第三个点,JavaScript中给select追加option的方法是***.options.add(new Option());
第四个点,form.render();虽然不知道这是什么意思,但是这也是一个必须注意的地方
下午在使用bootstrap给select添加option元素时,时用js动态生成的,发现怎么都生成不了,于是F12查看 select里面是添加起了,实际展示的不是用的这个select 而是下面那个div里面的内容。这个时候就需要强制刷新元素渲染页面了
代码例子:
function edit(ele){ $("#parent").append("<option value=''></option>"); var id=$(ele).attr("data-id"); $.ajax({ type: 'POST', dataType : "json", contentType:"application/json", async:false, url: "/pinyu/menu/list/", data: {}, error: function () { layMsg("数据获取异常,请联系管理员!"); }, success:function(data){ var options=""; for(var i=0;i<data.length;i++){ var d=data[i]; if(d.id!=id){ options+="<option value='"+d.id+"'>"+d.name+"</option>"; }else{ $("#level").val(d.level); $("#name").val(d.name); $("#sort").val(d.sort); $("#url").val(d.url); $("#parent").val(d.parentId); $("#id").val(d.id); } } $("#parent").append(options); //要以编程方式更新JavaScript的选择,首先操作选择,然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时,或通过JavaScript禁用/启用选择时,这是必需的。 $('#parent').selectpicker('refresh'); //render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局,这将非常有用。 $('#parent').selectpicker('render'); } }) }
最主要是最后面2行,缺一不可:
//要以编程方式更新JavaScript的选择,首先操作选择,然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时,或通过JavaScript禁用/启用选择时,这是必需的。
$('#parent').selectpicker('refresh');
//render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局,这将非常有用。
$('#parent').selectpicker('render');
js中可以动态的给select添加option,下面来看看常用的两种方法
效果图
![]()
一、通过appendchild来动态添加option
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>select动态添加</title> </head> <script type="text/javascript"> window.onload = function(){ var sel = document.getElementById("sel"); var btn = document.getElementById("btn"); btn.onclick = function(){ var opt = document.createElement("option"); opt.innerHTML = "this is option"; sel.appendChild(opt); } } </script> <body> <select id = "sel"> <option>---请选择---</option> </select> <input type="button" id="btn" value="添加" /> </body> </html>
二、通过options.add(string,value)添加option
第一个属性代表标签内的内容,第二个代表value值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>select动态添加</title> </head> <script type="text/javascript"> window.onload = function(){ var sel = document.getElementById("sel"); var btn = document.getElementById("btn"); btn.onclick = function(){ var opt = new Option("123456",01);//第一个代表标签内的内容,第二个代表value sel.options.add(opt); } } </script> <body> <select id = "sel"> <option>---请选择---</option> </select> <input type="button" id="btn" value="添加" /> </body> </html>
由于前端使用的是layUI,所以使用寻常的方法行不通。需要注意几个点
第一个点,需要注册layUI,然后拿到form
第二个点,取消异步请求
第三个点,JavaScript中给select追加option的方法是***.options.add(new Option());
第四个点,form.render();虽然不知道这是什么意思,但是这也是一个必须注意的地方
转载于:https://www.cnblogs.com/shitou911013/p/11052082.html
原文地址为:JS:给select添加option选项今天遇到一个问题,就是动态添加option到slect里面在ie6不成功:
<script> var shosetype=document.createElement("select"); shosetype.setAttribute("id","sc"); document.body.appendChild(shosetype); var option="<option value=\"1\">添加成功</option>"; shosetype.innerHTML=option; </script>应该是innerHTML的问题,
把:
shosetype.innerHTML=option;
改为:shosetype.options.add(new Option("1","添加成功"));就能得到效果:
转载请注明本文地址:JS:给select添加option选项