집 > 기사 > 웹 프론트엔드 > 데이터 목록에 옵션을 동적으로 추가하거나 js를 사용하여 선택하는 방법에 대한 자세한 설명

데이터 목록에 옵션을 동적으로 추가하거나 js를 사용하여 선택하는 방법에 대한 자세한 설명

小云云원래의: 2018-05-19 14:01:402896검색

때때로 구성 파일에서 정보를 읽어서 select의 옵션 옵션과 같은 사용자 옵션에 추가해야 하는 경우가 있습니다. 이 글에서는 주로 js를 사용하여 데이터 목록이나 선택에 옵션을 동적으로 추가하는 방법을 공유합니다. 좋은 참고값이 있으니 모든 분들께 도움이 되었으면 좋겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

다음은 이런 상황에 대한 예입니다

내용은 다음과 같습니다.

<!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实现的方式
/*var op=document.createElement("option"); 
op.setAttribute("label",city.label);
op.setAttribute("value",city.value); 
ss.appendChild(op);*/ 
//jquery实现的方式
$("#cities").append(&#39;<option label="&#39;+city.label+&#39;" value="&#39;+city.value+&#39;"></option>&#39;);
}
}
//页面加载完时加载此函数
window.onload = function(){
loadcities();
}
</script>

데이터 목록에 옵션을 동적으로 추가하거나 js를 사용하여 선택하는 방법에 대한 자세한 설명

관련 기사