利用js給datalist或select動態(tài)添加option選項(xiàng)的方法
有時需要從配置文件中讀取信息,然后添加到用戶的選擇項(xiàng)中,比如select的option選項(xiàng),下面針對此類情況做了一個實(shí)例
內(nèi)容如下:
<!DOCTYPE html> <html> <head> <title>鼠標(biāo)點(diǎn)擊時加載</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實(shí)現(xiàn)的方式 /*var op=document.createElement("option"); op.setAttribute("label",city.label); op.setAttribute("value",city.value); ss.appendChild(op);*/ //jquery實(shí)現(xiàn)的方式 $("#cities").append('<option label="'+city.label+'" value="'+city.value+'"></option>'); } } //頁面加載完時加載此函數(shù) window.onload = function(){ loadcities(); } </script>
以上這篇利用js給datalist或select動態(tài)添加option選項(xiàng)的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
- jQuery動態(tài)產(chǎn)生select option下拉列表
- JQuery動態(tài)添加Select的Option元素實(shí)現(xiàn)方法
- JS 通過系統(tǒng)時間限定動態(tài)添加 select option的實(shí)例代碼
- JS & JQuery 動態(tài)添加 select option
- js動態(tài)改變select選擇變更option的index值示例
- 動態(tài)添加option及createElement使用示例
- jquery動態(tài)添加option示例
- JS動態(tài)添加與刪除select中的Option對象(示例代碼)
- 使用js對select動態(tài)添加和刪除OPTION示例代碼
- JS動態(tài)添加option和刪除option(附實(shí)例代碼)
- javascript 動態(tài)設(shè)置已知select的option的value值的代碼
- javascript 動態(tài)創(chuàng)建 Option選項(xiàng)
- js或jquery動態(tài)輸出select option的實(shí)現(xiàn)代碼
相關(guān)文章
前端滾動錨點(diǎn)三個常用方案(點(diǎn)擊后頁面滾動到指定位置)
這篇文章主要給大家介紹了關(guān)于前端滾動錨點(diǎn)的三個常用方案,實(shí)現(xiàn)的效果就是點(diǎn)擊后頁面滾動到指定位置,三種方法分別是scrollIntoView、scrollTo和scrollBy,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01基于KO+BootStrap+MVC實(shí)現(xiàn)的分頁控件代碼分享
本段js和html兩段代碼實(shí)現(xiàn)分頁控件效果,下面通過本文給大家詳細(xì)介紹下基于KO+BootStrap+MVC實(shí)現(xiàn)的分頁控件,非常不錯,感興趣的朋友一起看看吧2016-11-11ZeroClipboard.js使用一個flash復(fù)制多個文本框
這篇文章主要為大家詳細(xì)介紹了ZeroClipboard.js使用一個flash復(fù)制多個文本框,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06javascript正則表達(dá)式模糊匹配IP地址功能示例
這篇文章主要介紹了javascript正則表達(dá)式模糊匹配IP地址功能,結(jié)合簡單實(shí)例形式演示了JS模糊匹配IP地址的實(shí)現(xiàn)方法,涉及針對數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下2017-01-01js添加table的行和列 具體實(shí)現(xiàn)方法
這篇文章介紹了js添加table的行和列 具體實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-07-07JS中的==運(yùn)算: [''''] == false —>true
這篇文章主要介紹了JS中的==運(yùn)算: [''] == false —>true的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07element必填校驗(yàn)輸入空格問題修改正則表達(dá)式、請求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格(推薦)
這篇文章主要介紹了element必填校驗(yàn)輸入空格問題修改正則表達(dá)式、請求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格,本文通過圖文實(shí)例代碼相結(jié)合給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02django admin 使用SimpleUI自定義按鈕彈窗框示例
Django 后臺admin有大量的屬性和方法,擁有強(qiáng)大的功能和自定義能力,這篇文章主要介紹了django admin 使用SimpleUI自定義按鈕彈窗框示例,需要的朋友可以參考下2023-04-04