javascript学习札记—简单的动态选择收件人/联系人
日期：2014-05-16 浏览次数：20348 次
javascript学习笔记—简单的动态选择收件人/联系人
联系人列表.html
收件人.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>收件人</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function showContact(){
//用变量接收返回的联系人列表。注意只有模式窗口才能有返回值！
var returnValue = window.showModalDialog("联系人列表.html","联系人列表","dialogWidth:500px;dialogHeight:400px");
var txt = document.getElementById("name");
txt.value = returnValue; //给收件人文本框赋值
}
</script>
</head>
<body>
<h1>发送消息/邮件</h1>
收件人：<input type="text" id="name" /><input type="button" value="选择联系人" onclick="showContact()" />
</body>
</html>联系人列表.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>联系人列表</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
table{
border:1px solid green;
border-collapse:collapse;
width:400px;
text-align:center;
}
table th,td{
border:1px solid green;
}
</style>
<script type="text/javascript">
function confirmContact(){
var ck = document.getElementsByName("contact");
var contactArr = check();
if(ck.length){
window.returnValue = contactArr.join(); //如果选中联系人，就将联系人返回
window.close(); //关闭窗体
}else{
alert("请选择一个联系人"); //如果没有选中，就提示选择
}
}
//将选择的联系人放到集合里
function check(){
var ck = document.getElementsByName("contact");
var arr = [];
for(var i=0;i<ck.length;i++){
if(ck[i].checked){
arr.push(ck[i].value);
}
}
return arr;
}
</script>
</head>
<body>
<h3>选择联系人</h3>
<table>
<tr>
<th>选择</th>
<th>编号</th>
<th>姓名</th>
</tr>
<tr>
<td><input type="checkbox" name="contact" value="张龙" /></td>
<td>1</td>
<td>张龙</td>
</tr>
<tr>
<td><input type="checkbox" name="contact" value="赵虎" /></td>
<td>2</td>
<td>赵虎</td>
</tr>
<tr>
<td><input type="checkbox" name="contact" value="王朝" /></td>
<td>3</td>
<td>王朝</td>
</tr>
<tr>
<td><input type="checkbox" name="contact" value="马汉" /></td>
<td>4</td>
<td>马汉</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="确定" onclick="confirmContact();" />
</td>
</tr>
</table>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
