您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)如何利用js給datalist或select動態(tài)添加option選項的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
有時需要從配置文件中讀取信息,然后添加到用戶的選擇項中,比如select的option選項,下面針對此類情況做了一個實例
內(nèi)容如下:
<!DOCTYPE html> <html> <head> <title>鼠標(biāo)點擊時加載</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head> <body> 選擇城市:<input type="text" name="cname" list="cities"/><br/> <datalist id="cities"> </datalist> </body> </html> <script type="text/javascript"> //需要添加的數(shù)據(jù)內(nèi)容,可以通過ajax請求獲取 var cities = [ {label:"xian",value:"西安"}, {label:"hubei",value:"湖北"}, {label:"wuhai",value:"武漢"} ]; //獲取datalist的dom var ss = document.getElementById("cities"); //定義加載城市的函數(shù) function loadcities(){ for(var i = 0;i < cities.length; i ++){ var city = cities[i]; //純js實現(xiàn)的方式 /*var op=document.createElement("option"); op.setAttribute("label",city.label); op.setAttribute("value",city.value); ss.appendChild(op);*/ //jquery實現(xiàn)的方式 $("#cities").append('<option label="'+city.label+'" value="'+city.value+'"></option>'); } } //頁面加載完時加載此函數(shù) window.onload = function(){ loadcities(); } </script>
感謝各位的閱讀!關(guān)于“如何利用js給datalist或select動態(tài)添加option選項”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。