이제 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('<option label="'+city.label+'" value="'+city.value+'"></option>');
}
}
//页面加载完时加载此函数
window.onload = function(){
loadcities();
}
</script>위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.
관련 기사:
AngularJS 양방향 데이터 바인딩 원칙(자세한 튜토리얼)
WeChat 애플릿의 데이터 저장 및 가치 획득과 관련된 문제
Vue에서 간소화된 스타일을 구현하는 방법(자세한 튜토리얼)
Vue 글로벌 구성 요소를 사용자 정의하는 방법은 무엇입니까?
jQuery와 vue를 이용한 드래그 인증 코드 기능 구현 방법
위 내용은 js를 사용하여 선택하는 옵션을 동적으로 추가하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
