집 >웹 프론트엔드 >JS 튜토리얼 >다중 Selections_javascript 기술을 지원하는 순회 드롭다운 목록 코드의 JS 구현

다중 Selections_javascript 기술을 지원하는 순회 드롭다운 목록 코드의 JS 구현

WBOY원래의: 2016-05-16 15:44:051484검색

이 기사의 예에서는 다중 선택을 지원하는 드롭다운 목록을 탐색하는 JS 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기에서는 JS를 사용하여 다중 선택이 가능한 드롭다운 목록을 구현합니다. 위쪽 드롭다운 목록에서 아무 값이나 마우스로 클릭하면 선택한 값이 아래쪽 목록에 표시됩니다. 키보드를 누르고 위쪽 목록에 있는 값을 다시 클릭하면 다중 선택 기능을 사용할 수 있습니다. 이러한 종류의 응용 프로그램은 웹 페이지에서 흔히 볼 수 있습니다. .

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-select-option-cha-codes/

구체적인 코드는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>遍历多选择下拉列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.wenbenkuang {
 font-family: "宋体";
 font-size: 9pt;
 color: #333333;
 border: 1px solid #999999;
}
</style>
</head>
<body style="font-size:12px">
<form name="form1" method="post" action="">
 <table width="300" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#FFCC00">
 <tr>
  <td height="22" align="left" bgcolor="#FFFFFF">可以进行多项选择的下拉列表:</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#FFFFFF"><select name="mcusep" size="4" multiple class="wenbenkuang"
onchange="updateorder()">
  <option value="JavaScript程序设计">JavaScript程序设计</option>
  <option value="JavaScript经典教程">JavaScript经典教程</option>
  <option value="JavaScript范例宝典">JavaScript范例宝典</option>
  <option value="JavaScript与CSS样式">JavaScript与CSS样式</option>
  <option value="JavaScript与HTML">JavaScript与HTML</option>
  </select></td>
 </tr>
 <tr>
  <td height="22" align="left" background="images/bg.gif" bgcolor="#FFFFFF">显示所选内容:</td>
 </tr>
 <tr>
  <td align="center" bgcolor="#FFFFFF"><textarea name="textarea" cols="40" rows="6" class="wenbenkuang"></textarea></td>
 </tr>
 </table>
</form>
<script language="javascript">
function updateorder()
{
 var orderstring="";
 var n=document.form1.mcusep.length;
 for (i=0;i<n;++i)
 {
 if (document.form1.mcusep.options[i].selected)
 {
  orderstring+=document.form1.mcusep.options[i].value+"\n";
 }
 }
 document.form1.textarea.value=orderstring;
}
</script>
</body>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：중국 발렌타인 데이 큐피드 양궁 Game_jquery다음 기사：중국 발렌타인 데이 큐피드 양궁 Game_jquery

다중 Selections_javascript 기술을 지원하는 순회 드롭다운 목록 코드의 JS 구현

관련 기사