<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> dd { cursor: pointer; } </style> <script type="text/javascript"> window.onload = function () { var odl = document.getElementsByTagName(‘dl‘); var odiv = document.getElementById(‘div1‘); var location = ‘‘; var position = ‘‘; var salary = ‘‘; for(var i = 0; i < odl.length; i++) { fn(i); } function fn(n) { var odd = odl[n].getElementsByTagName(‘dd‘); for(var i = 0; i < odd.length; i++ ) { odd[i].onclick = function () { switch(n) { case 0: location = this.innerHTML + ‘ ‘; break; case 1: position = this.innerHTML + ‘ ‘; break; case 2: salary = this.innerHTML + ‘ ‘; break; } odiv.innerHTML = location + position + salary; }; } } } </script> </head> <body> <dl> <dt>地区</dt> <dd>东城</dd> <dd>西城</dd> <dd>朝阳</dd> <dd>昌平</dd> </dl> <dl> <dt>职位</dt> <dd>美工设计</dd> <dd>前端工程师</dd> <dd>后台开发</dd> </dl> <dl> <dt>薪资</dt> <dd>4000</dd> <dd>5000</dd> <dd>6000</dd> </dl> <div id="div1"></div> </body> </html>
原文：http://www.cnblogs.com/mayufo/p/4208933.html