利用js給datalist或select動態(tài)添加option選項的方法
更新時間:2018年01月25日 14:20:24 作者:wdhouyigege
下面小編就為大家分享一篇利用js給datalist或select動態(tài)添加option選項的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
有時需要從配置文件中讀取信息,然后添加到用戶的選擇項中,比如select的option選項,下面針對此類情況做了一個實例
內(nèi)容如下:
<!DOCTYPE html> <html> <head> <title>鼠標點擊時加載</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>
以上這篇利用js給datalist或select動態(tài)添加option選項的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
- jQuery動態(tài)產(chǎn)生select option下拉列表
- JQuery動態(tài)添加Select的Option元素實現(xiàn)方法
- JS 通過系統(tǒng)時間限定動態(tài)添加 select option的實例代碼
- 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(附實例代碼)
- javascript 動態(tài)設(shè)置已知select的option的value值的代碼
- javascript 動態(tài)創(chuàng)建 Option選項
- js或jquery動態(tài)輸出select option的實現(xiàn)代碼
相關(guān)文章
基于KO+BootStrap+MVC實現(xiàn)的分頁控件代碼分享
本段js和html兩段代碼實現(xiàn)分頁控件效果,下面通過本文給大家詳細介紹下基于KO+BootStrap+MVC實現(xiàn)的分頁控件,非常不錯,感興趣的朋友一起看看吧2016-11-11ZeroClipboard.js使用一個flash復(fù)制多個文本框
這篇文章主要為大家詳細介紹了ZeroClipboard.js使用一個flash復(fù)制多個文本框,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06JS中的==運算: [''''] == false —>true
這篇文章主要介紹了JS中的==運算: [''] == false —>true的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07element必填校驗輸入空格問題修改正則表達式、請求攔截器實現(xiàn)所有輸入框去除首尾空格(推薦)
這篇文章主要介紹了element必填校驗輸入空格問題修改正則表達式、請求攔截器實現(xiàn)所有輸入框去除首尾空格,本文通過圖文實例代碼相結(jié)合給大家講解的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02django admin 使用SimpleUI自定義按鈕彈窗框示例
Django 后臺admin有大量的屬性和方法,擁有強大的功能和自定義能力,這篇文章主要介紹了django admin 使用SimpleUI自定義按鈕彈窗框示例,需要的朋友可以參考下2023-04-04