项目描述：
图一
如上图所示：在该页面添加认证方式下拉框 初始化为有5个认证方式 可以追加、删除。
图二
如上图所示： 点添加按钮 出来一个弹出框可以取三种认证方式的别名 当点保存时 在图一下拉框自动添加并默认显示该添加的方式
实现代码：
[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>无标题文档</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]
- 大小: 15.8 KB
- 大小: 19.4 KB
分享到：
相关推荐
当用户选择下拉框中的一个选项时，我们可以监听`onchange`事件，然后在事件处理函数中获取选中的选项并插入到表格中： ```javascript dropdown.onchange = function() { var selectedOption = this.options[this....
3. **DOM操作**：使用jQuery的DOM（Document Object Model）操作方法，如`next()`, `prev()`, 和 `children()`，来添加、删除和修改下拉框，确保同一页面上多个级联下拉框之间的独立性。 4. **事件处理**：`...
同时，动态赋值也支持对下拉框选项进行过滤、排序等功能，为开发者提供了丰富的操作空间。 总之，Bootstrap下拉框动态赋值方法是前端开发中常用且实用的技术点，它能有效地将后端数据与前端界面结合，实现数据的...
从上面的描述和代码示例，我们可以了解到实现下拉框选项移动的功能，不仅仅是为了界面的美观，更重要的是能够提供一种交互式的用户体验，让用户能够自主地管理信息的布局，这对于开发动态网站或应用是非常有用的。...
这种方法的实现比较简单，但功能也较为基础，主要是实现了将下拉框选项的值同步到input元素中。 具体代码如下： ```html ;"> ;width:18px;overflow:hidden;"> ;margin-left:-100px" onchange="this.parentNode....
在创建无限级联菜单时，jQuery提供了便利的方法来处理Select元素，如`$(selector).change()`用于监听下拉框的改变事件，`$(selector).append()`用于向DOM元素追加新的内容。 这个压缩包中的示例文件，"codesc.net...
在本文中，我们将深入探讨如何使用jQuery实现一个功能：当用户点击下拉框（Select）中的选项时，所选值会被累加并显示在文本框（Input）中。这个功能适用于那些需要收集多项选择并进行计算或展示的场景，如统计用户...
Element-UI的`<el-select>`组件提供了一个方便的方式来选择数据，但默认情况下，当数据量过大时，一次性加载所有选项可能会导致页面性能下降。为了解决这个问题，我们可以实现一个滚动加载功能，即在用户滚动到...
在本篇关于jQuery中DOM操作和事件处理的文章中，我们将学习如何利用jQuery实现一个下拉框选项的动态转移功能。下拉框（select元素）作为网页中常见的表单控件之一，经常需要根据用户交互改变其选项。jQuery提供了一...
页面包含两个`<select>`元素，分别具有`id="select1"`和`id="select2"`，它们都是多选下拉框。用户可以通过四个按钮来操作这两个下拉框中的选项：单个添加(`#add`)、全部添加(`#add_all`)、单个移除(`#remove`)和...
DOM操作包括元素的获取、添加、删除和修改，如`append()`用于在元素内部追加内容，`remove()`移除指定元素，`attr()`设置或获取属性值。 在这个插件中，下拉多选框（Multiple Select Dropdown）通常由一个普通的...
级联下拉列表允许用户先选择一个上级选项（如省份），然后根据所选的上级选项动态加载下级选项（如城市）。 首先，我们来看JavaScript部分，这部分主要负责处理用户交互和与服务器通信。代码中的`fun.js`文件包含了...
在这个例子中，为ID以`"sl_0"`开头的select元素绑定了一个`change`事件，当用户改变了选项时，会触发一个弹窗显示“你点击了下拉框”。 8. 总结：通过使用jQuery的事件委托技术，开发者可以有效地为动态生成的元素...
如果需要清空下拉框的所有选项，可以使用`empty()`方法： ```javascript // 清空下拉框 $('#sltList').empty(); ``` #### 六、触发事件 在某些情况下，可能需要手动触发某些事件，如`change`事件，以便执行相关的...
首先，定义了两个具有多个选项的下拉框，一个用于显示选项，另一个为空。然后，通过绑定了不同的事件处理器来实现选项的动态添加。 例如，将选中的选项添加到右边的下拉框，可以通过以下代码实现： ```javascript ...
在AJAX的success回调中，先清空当前下拉框，然后添加一个“请选择”的默认选项，接着遍历后台返回的数据，将每个数据项的值和显示文本转化为`<option>`元素，追加到下拉框中。 当用户在国家或省份下拉框中做出选择...
`jquery_1.4.1_api.chm`文档详细解释了jQuery 1.4.1版本的每个函数和方法，而`jQuery EasyUI 1.2.6.CHM`文档则深入介绍了EasyUI的各种组件和配置选项。对于初学者和有经验的开发者来说，这两份资料都是非常宝贵的...
- 首先，HTML页面需要有三个下拉框，分别对应省、市、区，以及用于显示和输入地址的其他元素。 - 使用jQuery的`$(document).ready()`或简写形式`$(function() {...})`确保在DOM加载完成后执行代码。 - 初始化...