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

亚连
풀어 주다: 2018-06-09 14:37:41
원래의
11173명이 탐색했습니다.

이제 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>
로그인 후 복사

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

AngularJS 양방향 데이터 바인딩 원칙(자세한 튜토리얼)

WeChat 애플릿의 데이터 저장 및 가치 획득과 관련된 문제

Vue에서 간소화된 스타일을 구현하는 방법(자세한 튜토리얼)

Vue 글로벌 구성 요소를 사용자 정의하는 방법은 무엇입니까?

vue2.0에서 다중 페이지 개발 구현 방법

jQuery와 vue를 이용한 드래그 인증 코드 기능 구현 방법

위 내용은 js를 사용하여 선택하는 옵션을 동적으로 추가하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿