页面下拉框选项追加

最新推荐文章于 2023-02-13 10:37:00 发布

南宫瑾

最新推荐文章于 2023-02-13 10:37:00 发布

阅读量445

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js ViewUI

本文链接：https://blog.youkuaiyun.com/u011861781/article/details/84600871

js 专栏收录该内容

12 篇文章

订阅专栏

项目描述：

[img]http://dl2.iteye.com/upload/attachment/0097/3470/b9835817-0e17-315d-b3da-d23b8434eaf6.png[/img]
图一

如上图所示：在该页面添加认证方式下拉框初始化为有5个认证方式可以追加、删除。

[img]http://dl2.iteye.com/upload/attachment/0097/3475/8c2f7c3b-dbef-316a-a7a2-95d78845797e.png[/img]
图二

如上图所示：点添加按钮出来一个弹出框可以取三种认证方式的别名当点保存时在图一下拉框自动添加并默认显示该添加的方式

实现代码：

[img][code="java"]
<!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>无标题文档</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">认证方式：</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('删除成功');
			  $("#AuthTypeId>option:selected").remove();
			  return false;
			}else if(message=="error"){
			   alert('系统认证名称，无法删除');
			   return false;
			}else{
				alert('删除失败');
			  return false;
			}
    }
	});	
}
function closeDialog(obj){
	$(obj).hide();
}
</script>

</body>
</html>

[/img][/code]