page drop-down box options added

Project description:

Figure 1 is

as shown above: The drop-down box for adding authentication methods on this page is initialized to have 5 authentication methods that can be added and deleted.

Figure 2

is shown in the figure above: Click the Add button and a pop-up box will appear. You can take the aliases of the three authentication methods. When you click Save, it will be automatically added in the drop-down box of the figure and the added method will be displayed by default.

Implementation code:

[img]<!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=gb2312" />
<link href="/bh/style/middle_style.css" rel="stylesheet" type="text/css"/>
<link href="/bh/style/jquery.datepick.css" rel="stylesheet" type="text/css"/>

<script>
var AuthTypeId1 = [
];
$(function(){	
	$.each(AuthTypeId1,function(i,item){
		$("#AuthTypeId").append("<option value='"+item.AuthTypeId+"'>"+item.AuthTypeName+"</option>");;
	});
})

<script>
</script>
<title>Untitled document</title>
<style>
input.checkboxsel{float:left;margin-top:6px;margin-top:3px\9;*margin-top:1px}
</style>
</head>
<body scroll="no">
<div class="head-box">
<h3 class="now">基本信息</h3>
<span class="right-fix"></span>
</div>
<div class="whitepagebox" id="tabboxbig">
<div class="grly-box" id="shougongpeizhi">
<table border="0" style="border-left:1px solid #d8d8d8;table-layout:fixed;">
<tbody>
 <tr>
    <td class="tit2">Authentication method:</td>
    <td >	
    	<select name="AuthTypeId" id="AuthTypeId" class="autobox">
      </select>
      <a href="javascript:void(0);" class="btn_four_grly" onclick="__getDialog('#Dialog01')">添加</a>
      <a href="javascript:void(0);" class="btn_four_grly" onclick="delete1()">删除</a>
    </td>
  </tr>
  </tbody>
  </table>
</div>


<style type="text/css">
.fdialog{width:820px;height:440px;border-radius:5px;}
.fdialog .dialog-bg{width:2000px;height:2000px;background:#036;opacity:0.8;filter:alpha(opacity=80);}
.fdialog .dialog-cont{width:800px;height:420px;overflow:hidden;margin:10px;padding:0;}
.fdialog .dialog-title,.fdialog .dialog-content{width:100%;}
.fdialog .dialog-content{height:380px;border:0;padding:0;}
</style>

<script type="text/javascript">

function __getDialog(obj,s){
	var s=localsession;
  
	var ww = $(window).width(), wh = $(window).height();
	var ow = $(obj).width(), oh = $(obj).height();
	var p = document.documentElement.scrollTop || document.body.scrollTop;
	//$(".dialog-bg").css("opacity",0.8);
	//$(".dialog-close",obj).click(function(){$(obj).hide()});
		$(obj).find("iframe").attr("src","auth_type_openldap1.cgi?"+s);
	$(obj).css({
		"top":(wh - oh)/2+p > 0 ? (wh - oh)/2+p : 0,
		"left":(ww - ow)/2 > 0 ? (ww - ow)/2 :0
	}).fadeIn("fast");
	
	$(window).wresize(function(){
		var ww = $(window).width(), wh = $(window).height();
		var ow = $(obj).width(), oh = $(obj).height();
		var p = document.documentElement.scrollTop || document.body.scrollTop;
		//$(".dialog-bg").css("opacity",0.8);
		//$(".dialog-close",obj).click(function(){$(obj).hide()});
		$(obj).css({
			"top":(wh - oh)/2+p > 0 ? (wh - oh)/2+p : 0,
			"left":(ww - ow)/2 > 0 ? (ww - ow)/2 :0
		});
	})
}
function reAuthType(v,txt){
    $("#AuthTypeId").append("<option value='"+v+"'>"+txt+"</option>").val(v);
}

function delete1(){
	var auid=$("#AuthTypeId").val();
  $.ajax({
		type:"POST",
		url:"manager_add.cgi",
		data:{auid:auid,session:localsession1,task:1},
		success:function(message){
			if(message=="success"){
			  alert('Delete successful');
			  $("#AuthTypeId>option:selected").remove();
			  return false;
			}else if(message=="error"){
			   alert('system authentication name, cannot be deleted');
			   return false;
			}else{
				alert('Deletion failed');
			  return false;
			}
    }
	});	
}
function closeDialog(obj){
	$(obj).hide();
}
</script>

</body>
</html>
[/img]

page drop-down box options added

Guess you like