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]