집 > 기사 > 웹 프론트엔드 > js를 사용하여 선택하는 옵션을 동적으로 추가하는 방법(자세한 튜토리얼)

js를 사용하여 선택하는 옵션을 동적으로 추가하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-09 14:37:4111160검색

이제 js를 사용하여 데이터 목록에 옵션을 동적으로 추가하거나 선택하는 방법을 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

구성 파일에서 정보를 읽어서 select의 옵션 옵션과 같은 사용자 옵션에 추가해야 하는 경우가 있습니다. 다음은 그러한 상황에 대한 예입니다

내용은 다음과 같습니다.

<!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를 사용하여 선택하는 옵션을 동적으로 추가하는 방법(자세한 튜토리얼)

관련 기사