JavaScript动态操作select下拉框

相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中。因为之前牵扯到optgroup标签时遇到了问题,没查到太过详细的解决方案,自己动手操作记录一下。

首先就是咱们的老朋友"select"标签,因为需要js、jq两种操作,所以就定义两个select标签。

HTML代码:

<div style="width: 200px;height: 100px;margin: auto;margin-top: 100px;padding: 20px;background-color: pink;">
	<select id="mySelect1" style="width: 120px;"></select>
	<select id="mySelect2" style="width: 160px;"></select>
	<button id="addSelect2">添加</button> <!-- 此处用于点击动态添加到mySelect2 -->
</div>

之后就是引用jq,定义js、jq操作,代码我都贴下面了。

JS代码:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
        //1.动态操作 - JS方式
        //这里先定义一个json对象,用于获取并新增到select标签
        let language={
	        "languageList":[
	        {
		    "groupName":"前端",
		    "optionName":[
			    {"languageName":"html"},
			    {"languageName":"CSS"},
			    {"languageName":"javascript"}
				],
	        },
	        {
		    "groupName":"后端",
		    "optionName":[
			    {"languageName":"java"},
			    {"languageName":"JSP"}
				]
	        }
	      ]
	    };
        //language.languageList - 数据位置
        let index=0;
        for (obj of language.languageList) {
	        //js创建optgroup标签
	        let optgroup=document.createElement("optgroup");
	        //设置optgroup标签的label和id值
	        optgroup.label=obj.groupName;
	        optgroup.id="optgroupId"+index;
                //把创建optgroup新增到select下
	        document.getElementById("mySelect1").add(optgroup);
	        //针对optgroup标签,添加它的option标签
	        for (var i = 0; i < obj.optionName.length; i++) {
		        //js创建option标签
		        let option=document.createElement("option");
		        option.value=obj.optionName[i].languageName;
		        option.innerHTML=obj.optionName[i].languageName;
		        document.getElementById("optgroupId"+index).appendChild(option);
	        }
	        index+=1; //自定义下标放在最后新增,防止添加option时id增加
        }

        //2.动态新增 - JQ方式
        let item=0;
        $("#addSelect2").click(function(){
	        item=item+1;
	        //jq点击按钮后向下拉框新增optgroup标签
	        $("#mySelect2").append("<optgroup id='optgroup"+item+"' label='生成的optgroup标签"+item+"'></optgroup>");
	        let r=Math.floor((Math.random()*5)+1); //生成随机数1-5
                //把随机数个数个的option添加到当前新增的optgroup下
	        for (var i = 1; i <= r; i++) {
		        $("#optgroup"+item).append(`<option value="`+i+`">随机生成的option`+i+`</option>`);
	        }
        });
</script>

需要注意的是:尽管用的id是递增产生的,但前面的名字也不要一样,我在测试按钮功能的时候,没注意就把两种optgroup的id定义成一样的,结果按钮随机生成的option都加到了相应id的mySelect1的optgroup里面了。

最后再贴一下运行效果

首先就是mySelect1回显json中的数据

点击添加按钮,新增到mySelect2

到此这篇关于JavaScript动态操作select下拉框的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript实现两个select下拉框选项左移右移

    今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序,刚刚才开始学javascript还有很多优化的地方. Javascript代码 <script type="text/javascript"> /**选中的元素向右移动**/ function moveRight() { //得到第一个select对象 var selectElement = document.getElementById("first"); var optionE

  • js实现下拉框效果(select)

    效果图: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style typ

  • 详解vuejs2.0 select 动态绑定下拉框支持多选

    select 下拉选择 产品类型:这一项是select 涉及到父子组件信息传递 下面拆开讲解 父组件 <div class="sales-board-line"> <div class="sales-board-line-left"> 产品类型: </div> <div class="sales-board-line-right"> <v-selection :selections="

  • JS Select下拉框(支持输入模糊查询)

    本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <Script Language="Javascript"> f

  • vue.js select下拉框绑定和取值方法

    最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

  • js实现省市区三级联动非select下拉框版

    在网上搜三级联动发现都是用option写的,突发奇想用其他方式写了一个,自我感觉效果还不错,大家感兴趣的可以看看,不说废话,大家看效果 代码如下,小白写的有点乱,大家想看的就看看 1.html代码 <div class="box"> <section class="province">省</section> <section class="city">市</section> <se

  • Vue.js仿Select下拉框效果

    本文实例为大家分享了Vue.js仿Select下拉框效果的具体代码,供大家参考,具体内容如下 废话少说,直接上图上代码: 效果图: HEML: <div id="demo"> <h2 class="title">自定义下拉框</h2> <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-se

  • JavaScript实现获取select下拉框中第一个值的方法

    本文实例讲述了JavaScript实现获取select下拉框中第一个值的方法.分享给大家供大家参考,具体如下: 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • js实现select下拉框选择

    最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题.后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧. <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义select</title> </head> <style> *{ margin: 0; padding: 0; } #m

  • AngularJS动态生成select下拉框的方法实例

    一.select相关知识 <select> <option value="0">HTML</option> <option value="1">Java</option> <option value="2">Python</option> </select> 其中,value 是存储到数据库的值,在此处为0,1,2这些数值,label 为显示在页面的值

  • 基于BootStrap multiselect.js实现的下拉框联动效果

    背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法,在此分享一下 1.先引入 <script src="~/Assets/js/bootstrap-multiselect.min.js"></script> <link href="~/Assets/css/bootstrap-multiselect

  • Ajax获取php返回json数据动态生成select下拉框的实例

    功能:根据选择不同层次,在专业下拉框中动态生成对应分类的专业. HTML: <label>层次</label> <select name="level" id="level"> <option value="1">本科</option> <option value="2">高职(专科)</option> </select> <

  • JavaScript实现向select下拉框中添加和删除元素的方法

    本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法.分享给大家供大家参考,具体如下: 1.说明 a. 利用append()方法向下拉框中添加元素 b. 利用remove()方法移除下拉框中最后一个元素 2.实例源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

随机推荐