有時需要從配置檔案中讀取資訊,然後添加到使用者的選擇項中,比如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>