<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
相信在前端設計中必然不會少的了表單,因為經常會使用到下拉框選項,又或是把資料動態回顯到下拉框中。因為之前牽扯到optgroup標籤時遇到了問題,沒查到太過詳細的解決方案,自己動手操作記錄一下。
首先就是咱們的老朋友"select"標籤,因為需要js、jq兩種操作,所以就定義兩個select標籤。
<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>
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下拉框的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支援it145.com。
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45