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