欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript動態(tài)操作select下拉框

 更新時間:2022年04月10日 09:34:28   作者:離人非淺  
這篇文章介紹了JavaScript動態(tài)操作select下拉框的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

相信在前端設(shè)計中必然不會少的了表單,因為經(jīng)常會使用到下拉框選項,又或是把數(shù)據(jù)動態(tài)回顯到下拉框中。因為之前牽扯到optgroup標(biāo)簽時遇到了問題,沒查到太過詳細(xì)的解決方案,自己動手操作記錄一下。

首先就是咱們的老朋友"select"標(biāo)簽,因為需要js、jq兩種操作,所以就定義兩個select標(biāo)簽。

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> <!-- 此處用于點擊動態(tài)添加到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.動態(tài)操作 - JS方式
        //這里先定義一個json對象,用于獲取并新增到select標(biāo)簽
        let language={
	        "languageList":[
	        {
		    "groupName":"前端",
		    "optionName":[
			    {"languageName":"html"},
			    {"languageName":"CSS"},
			    {"languageName":"javascript"}
				],
	        },
	        {
		    "groupName":"后端",
		    "optionName":[
			    {"languageName":"java"},
			    {"languageName":"JSP"}
				]
	        }
	      ]
	    };
        //language.languageList - 數(shù)據(jù)位置
        let index=0;
        for (obj of language.languageList) {
	        //js創(chuàng)建optgroup標(biāo)簽
	        let optgroup=document.createElement("optgroup");
	        //設(shè)置optgroup標(biāo)簽的label和id值
	        optgroup.label=obj.groupName;
	        optgroup.id="optgroupId"+index;
                //把創(chuàng)建optgroup新增到select下
	        document.getElementById("mySelect1").add(optgroup);
	        //針對optgroup標(biāo)簽,添加它的option標(biāo)簽
	        for (var i = 0; i < obj.optionName.length; i++) {
		        //js創(chuàng)建option標(biāo)簽
		        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; //自定義下標(biāo)放在最后新增,防止添加option時id增加
        }
		
        //2.動態(tài)新增 - JQ方式
        let item=0;
        $("#addSelect2").click(function(){
	        item=item+1;
	        //jq點擊按鈕后向下拉框新增optgroup標(biāo)簽
	        $("#mySelect2").append("<optgroup id='optgroup"+item+"' label='生成的optgroup標(biāo)簽"+item+"'></optgroup>");
	        let r=Math.floor((Math.random()*5)+1); //生成隨機(jī)數(shù)1-5
                //把隨機(jī)數(shù)個數(shù)個的option添加到當(dāng)前新增的optgroup下
	        for (var i = 1; i <= r; i++) {
		        $("#optgroup"+item).append(`<option value="`+i+`">隨機(jī)生成的option`+i+`</option>`);
	        }
        });
</script>

需要注意的是:盡管用的id是遞增產(chǎn)生的,但前面的名字也不要一樣,我在測試按鈕功能的時候,沒注意就把兩種optgroup的id定義成一樣的,結(jié)果按鈕隨機(jī)生成的option都加到了相應(yīng)id的mySelect1的optgroup里面了。

最后再貼一下運(yùn)行效果

首先就是mySelect1回顯json中的數(shù)據(jù)

點擊添加按鈕,新增到mySelect2

到此這篇關(guān)于JavaScript動態(tài)操作select下拉框的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)事件傳參與數(shù)據(jù)同步流程詳解

    微信小程序?qū)崿F(xiàn)事件傳參與數(shù)據(jù)同步流程詳解

    這篇文章主要介紹了微信小程序開發(fā)中實現(xiàn)事件傳參與數(shù)據(jù)同步的詳細(xì)流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-10-10
  • js字符串與Unicode編碼互相轉(zhuǎn)換

    js字符串與Unicode編碼互相轉(zhuǎn)換

    本文主要介紹了js字符串與Unicode編碼互相轉(zhuǎn)換的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-05-05
  • 原生js輪播(仿慕課網(wǎng))

    原生js輪播(仿慕課網(wǎng))

    本文主要分享了原生js實現(xiàn)仿慕課網(wǎng)的輪播效果。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • css與javascript跨瀏覽器兼容性總結(jié)

    css與javascript跨瀏覽器兼容性總結(jié)

    這篇文章主要介紹了css與javascript跨瀏覽器兼容性,包括常見的css兼容性問題與javascript兼容性問題,以及IE與Firefox等常用瀏覽器的兼容性分析,需要的朋友可以參考下
    2014-09-09
  • js動態(tài)創(chuàng)建及移除div的方法

    js動態(tài)創(chuàng)建及移除div的方法

    這篇文章主要介紹了js動態(tài)創(chuàng)建及移除div的方法,涉及javascript針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下
    2015-06-06
  • 9個javascript語法高亮插件 推薦

    9個javascript語法高亮插件 推薦

    語法高亮效果使用非常頻繁,特別是在博客里展示各種代碼的時候,可以讓代碼更易讀。我們身邊就有很多語法高亮的插件,其中大部分是用javascript寫的,也有一些是通過server端語言實現(xiàn)(比如Phyton或Ruby)。
    2009-07-07
  • 詳解javascript跨瀏覽器事件處理程序

    詳解javascript跨瀏覽器事件處理程序

    這篇文章主要為大家詳細(xì)介紹了javascript跨瀏覽器事件處理機(jī)制,感興趣的小伙伴們可以參考一下
    2016-03-03
  • TypeScript判斷對象類型的4種方式代碼

    TypeScript判斷對象類型的4種方式代碼

    這篇文章主要給大家介紹了關(guān)于TypeScript判斷對象類型的4種方式代碼,TypeScript能根據(jù)一些簡單的規(guī)則推斷(檢查)變量的類型,你可以通過實踐很快的了解它們,需要的朋友可以參考下
    2023-07-07
  • 利用404錯誤頁面實現(xiàn)UrlRewrite的實現(xiàn)代碼

    利用404錯誤頁面實現(xiàn)UrlRewrite的實現(xiàn)代碼

    要求:網(wǎng)站編碼為utf-8,不適用于GB2312; 替換字符的正則可以自己增加和修改,以適合自己的網(wǎng)站;
    2008-08-08
  • location.search在客戶端獲取Url參數(shù)的方法

    location.search在客戶端獲取Url參數(shù)的方法

    最近一直在寫html,剛接觸到,感覺挺復(fù)雜的。。比如傳參,在.net里可以直接用Request接受,而在html中還要經(jīng)過處理,找了一些資料,寫了個方法。
    2010-06-06

最新評論