精华内容
下载资源
问答
  • 做作业的时候需要给给一个select标签动态添加option,但却总是不成功,刚开始我是这样写的: $(#day).options.append(new Option(i,i)); 然后发现并没有变化,查资料后才发现,如果要用jQuery给select标签动态添加...
  • 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>
    
    
    展开全文
  • 下午在使用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');

    展开全文
  • 本人在使用Bootstrap过程中,用js动态给select元素添加option元素时没有显示,在for循环获取option数据时,是能获取的,但是就是显示不出来,只有当人为的去刷新此页面后才可以显示,这对用户来说很不友好,故从网上...

    问题起因

    本人在使用Bootstrap过程中,用js动态给select元素添加option元素时没有显示,在for循环获取option数据时,是能获取的,但是就是显示不出来,只有当人为的去刷新此页面后才可以显示,这对用户来说很不友好,故从网上查找解决办法。

    解决方法

    在获取完option数据后添加以下两句,即可在进行数据的更改后可以更新select选项

    //要以编程方式更新JavaScript的选择,首先操作选择,然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时,或通过JavaScript禁用/启用选择时,这是必需的。
    $('#parent').selectpicker('refresh');
    //render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局,这将非常有用。
    $('#parent').selectpicker('render');
    

    感谢 ypp91zr 这位博主,他解决此问题的原本在此链接:bootstrap js动态给select添加option元素 不展示

    展开全文
  • JS:给select添加option选项

    千次阅读 2018-06-14 12:37:10
    今天遇到一个问题,就是动态添加option到slect里面在ie6不成功: &lt;script&gt; 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选项
    展开全文
  • 原生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> ()">
  • 主要介绍了JavaScript为select添加option的方法和示例,十分的简单实用,有需要的小伙伴可以参考下。
  • JQ给selectoption添加点击事件

    万次阅读 2018-06-06 15:46:12
    我们在用到下拉列表框select时,需要对选中的&...想添加一个option的触发事件,在option添加onclick 点来点去就是不会触发事件又在select添加onclick 这下可好了,没选option呢就触发了!!!解决方案: selec...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。...select class="form-control selectpicker" name="college" id="eq_num" data-actions-box="true" data-live-search="true" data-live-search-pla...
  • 下面小编就为大家分享一篇利用jsdatalist或select动态添加option选项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 动态给select下拉框添加option

    万次阅读 2018-08-16 10:54:17
    方法很多: 1.JQuery的方法: ///先定义一个数组  var data=new Array(); ///然后.............数组data赋值 ............ ///最后把数组的值写入下拉框 ...#selectId"...option val...
  • 数据拿到了,但是添加select中不成功。 Jquery代码 ``` $.ajax({ url : '../board/getBoards', type : 'POST', success : function(data) { var boards = eval(data); var id = new Array(); $...
  • jquery为select添加option的代码探讨

    千次阅读 2017-04-24 18:00:17
    jquery为select添加option的代码探讨 A-A+ 前端博客•前端开发代码•jQuery | jquery代码•7792View 1这是一道讨论“使用jQuery为select添加option选项的最佳代码方法”。分析哪一种的写法是最佳方法。在...
  • 下面小编就为大家分享一篇layui select动态添加option的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • js为mui select添加Option

    千次阅读 2019-05-20 10:56:14
    var slt=document.getElementById(...var objOption=document.createElement("OPTION"); objOption.value='option的value'; objOption.text='option的text'; slt.add(objOption); 不能直接使用after追加 ...
  • ajax select 添加option 空白

    千次阅读 2009-11-08 20:45:00
    今天动态添加option到selectl时,出现了添加后option为空白,个数却正确的情况。代码如下: for(var i = 0; i oOption = document.createElement("OPTION"); oOption.value=results[i].childNodes[0].text; ...
  • select动态添加option问题

    万次阅读 2008-07-04 19:41:00
    题记:今天为个项目做两...问题:现象一,用方法objSelect.appendChild(objOpiton)给select添加option时,添加有出现列表项,但是显示空白,IE下的现象。 现象二,用objSelect.add(objOpiton)添加option,FF下不支持。
  • select2动态添加option

    千次阅读 2019-06-20 17:21:16
    select2动态添加option背景html原来的实现javascirpt实现后端接口返回取值修改后javascript实现后端接口返回结果取值结论 背景 select2 使用ajax remote加载数据方式时,不能使用$(’#select2’).val();的形式获取...
  • 如下所示: var selector=$('<select></select>...以上这篇JQuery动态添加SelectOption元素实现方法就是小编分享大家的全部内容了,希望能大家一个参考,也希望大家多多支持软件开发网。
  • 利用js给select或datalist动态添加option选项
  • easyui select 动态添加 option

    千次阅读 2017-08-04 15:04:46
    1.html代码:<select class="easyui-combobox" name="site" style="width:300px;" id="transSite" data-options="valueField:'id', textField:'text', panelHeight:'...</select>2.js代码://returnValue为后台返回的js
  • 主要介绍了JS & JQuery 动态添加 select option 的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧
  • 下面小编就为大家带来一篇Jquery遍历select option添加移除option的实现方法。小编觉得挺不错的,现在就分享大家,也大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 143,787
精华内容 57,514
关键字:

给select添加option