이번에는 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 중국어 웹사이트에서 다른 관련 기사도 주목하세요!
추천 도서:
vue의 $emit 및 $on 부모-자식 형제 구성 요소 작업에 대한 자세한 설명
위 내용은 JS로 드롭다운 상자 연결을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!