给select添加option

bootstrap js动态给select添加option元素不展示

千次阅读 2018-09-20 17:04:27

下午在使用bootstrap给select添加option元素时，时用js动态生成的，发现怎么都生成不了，于是F12查看 select里面是添加起了，实际展示的不是用的这个select 而是下面那个div里面的内容。这个时候就需要强制刷新...

下午在使用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');

收起

展开全文

动态给select添加option失败的问题原因及解决
2021-01-08 08:24:39
然后发现并没有变化，查资料后才发现，如果要用jQuery给select标签动态添加option，需要这样写： $(#day).append(+i+); 采用上面那种写法时，应该用var obj=document.getElementById(“day”)来获取select标签，...
收起

js中动态给select添加option的两种方法(制作下拉列表)

千次阅读 2019-10-22 21:34:01

js中可以动态的给select添加option，下面来看看常用的两种方法一、通过appendchild来动态添加option 二、通过options.add(string，value)添加option

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>

收起

展开全文

JavaScript中动态给select添加option

2019-06-19 16:22:00

由于前端使用的是layUI，所以...第三个点，JavaScript中给select追加option的方法是***.options.add(new Option()); 第四个点，form.render();虽然不知道这是什么意思，但是这也是一个必须注意的地方转载于:ht...

由于前端使用的是layUI，所以使用寻常的方法行不通。需要注意几个点

第一个点，需要注册layUI，然后拿到form

第二个点，取消异步请求

第三个点，JavaScript中给select追加option的方法是***.options.add(new Option());

第四个点，form.render();虽然不知道这是什么意思，但是这也是一个必须注意的地方

转载于:https://www.cnblogs.com/shitou911013/p/11052082.html

收起

展开全文

JS:给select添加option选项

千次阅读 2018-06-14 12:37:10

今天遇到一个问题，就是动态添加option到slect里面在ie6不成功： <script> var shosetype=document.createElement("selec

原文地址为：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选项

收起

展开全文

Bootstrap js动态给select添加option元素不显示
千次阅读 2019-01-28 18:19:41
本人在使用Bootstrap过程中，用js动态给select元素添加option元素时没有显示，在for循环获取option数据时，是能获取的，但是就是显示不出来，只有当人为的去刷新此页面后才可以显示，这对用户来说很不友好，故从网上...
收起
Bootstrap problem
原生JS给SELECT添加OPTION选项
千次阅读 2018-04-05 09:47:05
var cateList = eval(ajaxResult);... for(var idx in cateList) { var option = document.createElement("option"); option.value = cateList[idx].id; option.innerHTML ...
收起
利用js给select添加option并选中该option
千次阅读 2011-08-18 10:53:52
<option value='1'>aaaa</option> <option value='2'>bbbb</option> <option value='3'>cccc</option> <option value='4'>dddd</option> <option value='5'>eeee</option> </select> ()">
收起
button function
使用js给select添加option(兼容IE/Firefox)
2010-06-30 16:51:50
前些天在做项目的时候要使用JS给SELECT动态添加OPTION，遇到了个问题，JS代码如下： while (obj.selectedIndex > -1){ mot = obj.options[obj.selectedIndex].text; mov = obj.options[obj....
收起
Firefox ASP
jQuery给select添加option时，FireFox中可以执行，IE里不行？
2010-06-18 18:21:23
<option value="1" selected="selected">赛尔网络有限公司</option> <option value="10">赛尔网络有限公司北京分公司</option> </select> <select name="project.superDepartment.rowId" id="projectForm_...
收起
jquery
JQ给select的option添加点击事件
万次阅读 2018-06-06 15:46:12
我们在用到下拉列表框select时，需要对选中的&...想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件又在select中添加onclick 这下可好了,没选option呢就触发了！！！解决方案：给selec...
收起
JQ
动态给select下拉框添加option
万次阅读 2018-08-16 10:54:17
方法很多： 1.JQuery的方法： ///先定义一个数组 var data=new Array(); ///然后.............给数组data赋值 ............ ///最后把数组的值写入下拉框 ...#selectId"...option val...
收起
select 中添加option的注意
2014-04-29 14:43:00
在平时写JS中经常要给Select添加option,如果我们把option中的数据用一个字符串来表示：　eg: var strOption='<option>1</option><option>2</option><option>3</option>'; ...
收起
for循环动态的给select标签添加option内容
千次阅读 2019-05-17 18:58:15
微信小程序开发交流qq群 173683895 承接微信小程序开发。...select class="form-control selectpicker" name="college" id="eq_num" data-actions-box="true" data-live-search="true" data-live-search-pla...
收起
利用js给datalist或select动态添加option选项的方法
2020-10-18 19:06:34
下面小编就为大家分享一篇利用js给datalist或select动态添加option选项的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
收起
利用js给datalist或select动态添加option选项
千次阅读 2017-06-26 15:39:59
利用js给select或datalist动态添加option选项
收起
javascript
element中给select添加全选的option
2021-01-27 09:55:29
el-select v-model="my_stars" placeholder="国家" multiple collapse-tags > <el-option label="全球" value="全球"></el-option> <template v-for="(item, index) in languages"> <el-...
收起
js vue
为select动态添加option问题
万次阅读 2008-07-04 19:41:00
题记：今天为个项目做两...问题：现象一，用方法objSelect.appendChild(objOpiton)给select添加option时，添加有出现列表项，但是显示空白，IE下的现象。现象二，用objSelect.add(objOpiton)添加option,FF下不支持。
收起
safari 浏览器 function

bootstrap js动态给select添加option元素 不展示

动态给select添加option失败的问题原因及解决

js中动态给select添加option的两种方法(制作下拉列表)

一、通过appendchild来动态添加option

二、通过options.add(string，value)添加option

JavaScript中动态给select添加option

JS:给select添加option选项

Bootstrap js动态给select添加option元素不显示

原生JS给SELECT添加OPTION选项

利用js给select添加option并选中该option

使用js给select添加option(兼容IE/Firefox)

jQuery给select添加option时，FireFox中可以执行，IE里不行？

JQ给select的option添加点击事件

动态给select下拉框添加option

select 中添加option的注意

for循环动态的给select标签添加option内容

利用js给datalist或select动态添加option选项的方法

利用js给datalist或select动态添加option选项

element中给select添加全选的option

为select动态添加option问题

给select添加option

在 Linux 上构建企业级 DNS 域名解析服务

libFuzzer视频教程

java list自定义分页

计算机三级嵌入式知识点完全整理.pdf

MySQL 备份与恢复详解（高低版本 迁移；不同字符集 相互转换；表

Java中的常用方法

Redis-Client.zip

19-30份商业计划书.zip

响应式网页设计（一）.zip

【Python-随到随学】FLask第二周

MapTest.rar

基于Flink+Hudi构建企业亿级云上实时数据湖教程（PC、移动、小

MySQL 数据库权限管理（用户高级管理和精确访问控制）

Stream

Django数据库增删查改

CAN analysis

POLY STUDIO P15 设备参数和介绍（英文版）.pdf

最新yolov5 release版本 v4.0 yolov5-4.0.zip

mu-editor_1.1.0-alpha.2_win64.zip

20-30份商业计划书.zip

bootstrap js动态给select添加option元素不展示

MySQL 备份与恢复详解（高低版本迁移；不同字符集相互转换；表