在项目中可能会遇到这样的情况:
单击某个按钮后,需要弹出一个对话框来,来让用户有不同的选择,并且,这些备选答案中只是单向选择,不可多选,之后,根据选择的不同方法而进行不同的操作。
弹出一个对话框来让用户选择不同的选择,在实际中有2中方法,第一种是用<div></div>来做。先把这个做成隐藏的,之后,当有单击事件发生时,再让其显示。这种思路,这里不做太多介绍。第二种就是用子窗口来做。HTML的子窗口就是 ShowModalDialog()。
因为是只能单向选择,所以,这里就用到了HTML的RadioButton 按钮。
思路比较简单,直接上代码:
其一:单击事件弹出子窗口:
window.showModalDialog("adMetaOpenShow.jsp",window,"status:no;dialogHeight:210px;dialogWidth:360px;help:no");
弹出的子串口如图片。
子窗口中的代码为:
<table>
<tr height="30" align="center">
<td> <input type="radio" name="meta" value="1" > 图片 </td>
<td> <input type="radio" name="meta" value="2" > 视频 </td>
<td> <input type="radio" name="meta" value="3" > 文字 </td>
<td> <input type="radio" name="meta" value="4" > 问卷 </td>
</tr>
<tr height="30" align="right">
<td> <input type="button" value="确定" οnclick="go()"></td>
<td> <input type="button" value="取消" οnclick="goBack()"></td>
</tr>
</table>
在子窗口中的需要根据不同的选择而有不同的操作,即确定按钮的单击事件为。
代码:
function go(){
var str;
var flag = false;
var radioElements = document.getElementsByName("meta");
//必须选择一个 要添加的素材类型
for(var i=0;i<radioElements.length;i++){
if(radioElements[i].checked){
flag = true;
str =radioElements[i].value;
alert(str);
if(str == 1){
//跳转添加图片页面
window.location.href="adContentMgr_addImageMetaRedirect.do";
}else if(str == 2){
//跳转添加视频页面
window.location.href="adContentMgr_addVideoMetaRedirect.do";
}else if(str == 3){
//跳转添加文字页面
window.location.href="adContentMgr_addMessageMetaRedirect.do";
}else if(str == 4){
//跳转添加问卷页面
window.location.href="adContentMgr_addQuestionMetaRedirect.do"
}else{
window.close();
}
window.close();
}
}
if(!flag){
alert("不能为空,请确认后,选择要添加的素材类型!");
return false;
}
}
注解:为了保存操作的健全性,如果用户没有选择就单击确定按钮,就必须给出提示。
就是if(!flag){}
这里,也可以手动默认哪个按钮是被选中的。
根据不同的选择就可以进行不同的操作了。