天天看點

利用js給datalist或select動态添加option選項

有時需要從配置檔案中讀取資訊,然後添加到使用者的選擇項中,比如select的option選項,下面針對此類情況做了一個執行個體

内容如下:

<!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">

//需要添加的資料内容,可以通過ajax請求擷取

var cities = [

{label:"xian",value:"西安"},

{label:"hubei",value:"湖北"},

{label:"wuhai",value:"武漢"}

]; 

//擷取datalist的dom

var ss = document.getElementById("cities");

//定義加載城市的函數

function loadcities(){

for(var i = 0;i < cities.length; i ++){

var city = cities[i];

//純js實作的方式

//jquery實作的方式

$("#cities").append('<option label="'+city.label+'" value="'+city.value+'"></option>');

}

}

//頁面加載完時加載此函數

window.onload = function(){

loadcities();

}

</script>

繼續閱讀