JS로 드롭다운 상자 연결을 구현하는 단계에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-05-22 10:29:13
원래의
2074명이 탐색했습니다.

이번에는 JS에서 드롭다운 박스 링크를 구현하는 단계에 대해 자세히 설명하겠습니다. JS에서 드롭다운 박스 링크를 구현하는 데 있어 주의 사항은 무엇입니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> JS下拉联动</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == 'en'){
    var sec = document.getElementById('second');
    sec.innerHTML = "<option>one</option><option>two</option>";
  }else{
    var sec = document.getElementById('second');
    sec.innerHTML = "<option>一</option><option>二</option>";
  }
}
</script>
</head>
<body>
<p>
  <select id="first" onchange="setSecond(this)">
    <option value="en">en</option>
    <option value="zh">zh</option>
  </select>
</p>
<p>
  <select id="second">
  </select>
</p>
</body>
</html>
로그인 후 복사

innerHTML을 사용하세요. IE 브라우저에서는 이 방법을 지원하지 않으므로 개선 방법:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS下拉联动</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == 'en'){
    var sec = document.getElementById('second');
    sec.options[0] = new Option("one","one");
    sec.options[1] = new Option("two","two");
  }else{
    var sec = document.getElementById('second');
    sec.options[0] = new Option("一","one");
    sec.options[1] = new Option("二","two");//可设置循环配置,也可一个一个配置
  }
}
</script>
</head>
<body>
<p>
  <select id="first" onchange="setSecond(this)">
    <option value="en">en</option>
    <option value="zh">zh</option>
  </select>
</p>
<p>
  <select id="second">
  </select>
</p>
</body>
</html>
로그인 후 복사

는 Firefox, IE 등과 호환될 수 있습니다.

에서 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 이 기사에 오셔서 더 흥미로운 정보를 얻으세요. PHP 중국어 웹사이트에서 다른 관련 기사도 주목하세요!

추천 도서:

NodeJs 휴대폰 액세스 로컬 서버 사례 분석

vue의 $emit 및 $on 부모-자식 형제 구성 요소 작업에 대한 자세한 설명

위 내용은 JS로 드롭다운 상자 연결을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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