下拉复选框,javascript动态控制服务器控件实例www.301.net

最近在项目开发中,有的地方用到了下拉复选框,于是再网上找了一下,有很多种写法,但自己感觉不是很好,又不想用插件,因为感觉引入的js太大,功能太繁杂,于是决定自己写一个小demo,效果如下:

最近多个页面需要加载一些下拉列表框,供用户选择,原来都是在服务器端进行加载应运用。最后由于业务逻辑方面的考虑,需要将DropDownList的部分功能放到客户端实现。现在下拉列表的功能使用起来感觉比全部放到服务器端性能好多了。

javascript动态控制服务器控件实例,javascript控件

最近多个页面需要加载一些下拉列表框,供用户选择,原来都是在服务器端进行加载应运用。最后由于业务逻辑方面的考虑,需要将DropDownList的部分功能放到客户端实现。现在下拉列表的功能使用起来感觉比全部放到服务器端性能好多了。

具体方法:

在页面中放入一个DropDownList控件,并添加一项,用来分析其产生的HTML代码,这样在使用js进行动态控制时,将会非常清晰其测试代码如下所示:

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

在浏览器中查看,并对Html进行分析:以下是DropDownList控件生成的HTML代码。和普通的select没

有区别。那么也就可以通过js来动态填充、删除、选择等控制。

<select name="DropDownList1" id="DropDownList1">
<option value="1">1</option>
</select>

可以将<asp:ListItem>1</asp:ListItem>删除,现在添加两个HTML
button控件,分别用来实现添加选项,和删除所有选项。Button源码如下:

<input id="Button1" type="button" value="添加Option" onclick="addOption()" />

<input id="Button2" type="button" value="全部删除Option" onclick="delOption()" />

添加和删除函数如下所示:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的,之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");

var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}

}

function delOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE两种均支持
}
}

在浏览器中查看,可以轻松地创建选择下拉选项,由于这些是客户端生成,因此其效率上要高于服务器

端工作的代码。但是这个时候如果要使用DropDownList1.SelectedValue获取用户选择的选项,那么你会得

到一个错误。这是由于DropDownList是由JS动态添加的,因此,它的项不属于ViewState,并且不被维护,

也就是说我们无法在服务器端对其进行处理。为了解决这一问题,可以使用两种方式:1、Hidden控件保存

用户选项方式;2、Request.Form方式。(参见msdn品味Ajax)

1、我们在页面中添加一个Hidden控件,用它来保存DropDownList选项变化的信息,这样在用户选择感

兴趣的信息之后,我们就可以在服务器端获取信息,并进行处理,合理地实现客、服之间的分工。

对DropDownList控件添加一个onchange事件,此时它的html代码如下所示:

<asp:DropDownList ID="DropDownList1" runat="server" onchange="ResvItem()">
</asp:DropDownList>

Onchange事件如下所示,该事件主要保存用户选定的value:

function ResvItem(){
var objDdl = document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value = objDdl.options[objDdl.selectedIndex].value;
}

在此之后,我们使用一个asp:button控件来测验结果:

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}

到此,已经完成了所有的工作,但是还有一个问题,DropDownList的change事件只有在用户改变下拉选

项时才会触发。因此,用户使用默认选项进行提交时,则获取空值。因此我们可以在填充option时,即对

hidden初始化。对addOption事件添加一行代码如下:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的,之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");
var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}
document.getElementById("HiddenField1").value = optValue[0];
}

不过以上红色部分在TT浏览器下ADD不成功,其他浏览还没试过,以下是另一个种写法:

function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);

var DeptList=Guest_UserRegister.GetDeptList(v.value).value;

var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
while(num>0)
{
for(var j=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}

}
function GetSchoolList()
{
DelOption();
var ddlProvince = document.getElementById("ddlProvince");
var ddluserSchool = document.getElementById("ddluserSchool");
var v = ddlProvince.options[ddlProvince.selectedIndex];
var DeptList=Guest_UserRegister.GetSchoolList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}

(改善:当遇到选项比较多时,可以定义一个数组插入到HTML中,实现下拉的选项,可以参考省市区联动的写法:https://www.cnblogs.com/lprosper/p/9313536.html

具体方法:

Javascript获取后台动态生成的控件值

不管是前台生成还是后台生成的控件在浏览器中都是html控件。
比如一个服务器端控件 <asp:Button runat=”server” id=”btn1″
text=”Button1″/>
发送到浏览器中后应为 <input type=”button” value=”button1″
id=”btn1_xxxx”/>
可以通过
Document.getElementById(“btn1_xxxx”)来获取。
另外asp.net2.0以后 在控件中有一个ClientId的属性 可以制定客户端控件Id
 

www.301.net 1

在页面中放入一个DropDownList控件,并添加一项,用来分析其产生的HTML代码,这样在使用js进行动态控制时,将会非常清晰其测试代码如下所示:

服务器端怎得到 javascript 动态生成的控件

比如生成的控件的id为123
在服务器端用123.ClientId可得到
 

最近多个页面需要加载一些下拉列表框,供用户选择,原来都是在服务器端进行加载应运用…

CSS:

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

 

在浏览器中查看,并对Html进行分析:以下是DropDownList控件生成的HTML代码。和普通的select没

 1 div {
 2     display: inline-block;
 3 }
 4 
 5 select {
 6     min-width: 200px;
 7     height: 25px;
 8     border: 1px solid #000;
 9 }
10 
11 ul {
12     display: none;
13     list-style: none;
14     margin: 0;
15     padding: 0;
16     border: 1px solid #000;
17 }
18 
19 label {
20     display: block;
21     padding: 2px 10px;
22     white-space: nowrap;
23 }
24 
25 ul li:hover {
26     background-color: #aabbcc;
27 }

有区别。那么也就可以通过js来动态填充、删除、选择等控制。

 

<select name="DropDownList1" id="DropDownList1">
<option value="1">1</option>
</select>

HTML:

可以将<asp:ListItem>1</asp:ListItem>删除,现在添加两个HTML
button控件,分别用来实现添加选项,和删除所有选项。Button源码如下:

 

<input id="Button1" type="button" value="添加Option" onclick="addOption()" />

<input id="Button2" type="button" value="全部删除Option" onclick="delOption()" />
 1     <div>
 2         <select name="" id="lang1"></select>
 3         <ul id="ck1">
 4             <li>
 5                 <label><input type="checkbox">HTML</label>
 6             </li>
 7             <li>
 8                 <label><input type="checkbox">CSS</label>
 9             </li>
10             <li>
11                 <label><input type="checkbox">JavaScript</label>
12             </li>
13             <li>
14                 <label><input type="checkbox">jQuery</label>
15             </li>
16             <li>
17                 <label><input type="checkbox">PHP</label>
18             </li>
19             <li>
20                 <label><input type="checkbox">MySQL</label>
21             </li>
22         </ul>
23     </div>
24     <hr><!--HTML结构不能变-->
25     <div>
26         <select name="" id="lang2"></select>
27         <ul id="ck2">
28             <li>
29                 <label><input type="checkbox">Java</label>
30             </li>
31             <li>
32                 <label><input type="checkbox">C#</label>
33             </li>
34             <li>
35                 <label><input type="checkbox">C++</label>
36             </li>
37             <li>
38                 <label><input type="checkbox">Pyhton</label>
39             </li>
40         </ul>
41     </div>
42     <input type="button" onclick="console.log({'tag1':tag1,'tag2':tag2,})" value="查看字段">

添加和删除函数如下所示:

 

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的,之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");

var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}

}

function delOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE两种均支持
}
}

JavaScript:

在浏览器中查看,可以轻松地创建选择下拉选项,由于这些是客户端生成,因此其效率上要高于服务器

 

端工作的代码。但是这个时候如果要使用DropDownList1.SelectedValue获取用户选择的选项,那么你会得

 1     /**
 2      * [dropDownCk 下拉复选框]
 3      * @param  {[String]} boxId    [父级元素id]
 4      * @param  {[String]} selectId [下拉选id]
 5      * @param  {[String]} hiddenId [隐藏区域id]
 6      * @return {[Array]}          [description]
 7      */
 8     function dropDownCk(selectId,hiddenId) {
 9 
10         var boxId = "#" + boxId,
11             selectId = "#" + selectId,
12             hiddenId = "#" + hiddenId;
13         
14         $(hiddenId).mouseleave(function(){ // 鼠标离开隐藏复选区域
15             
16             $(this).hide();
17         
18         });
19         
20         $(selectId).click(function() { // 切换显示与隐藏
21 
22             $(hiddenId).toggle();
23 
24         });
25 
26         var tagArr = []; // 接收复选字段数组
27 
28         $(selectId).html("<option checked='true' style='display:none;'>" + "请选择项目" + "</option>");
29 
30         $(hiddenId + ' label').find('input').click(function() { // 点击向数组添加元素
31 
32             if ($(this).is(':checked')) {
33 
34                 tagArr.push($(this).parent().text());
35 
36                 $(selectId).html("<option checked='true' style='display:none;'>" + tagArr.join(",") + "</option>");
37 
38             } else {
39 
40                 tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素
41 
42                 if (tagArr.length == 0) {
43 
44                     $(selectId).html("<option checked='true' style='display:none;'>" + "请选择项目" + "</option>");
45 
46                 } else {
47 
48                     $(selectId).html("<option checked='true' style='display:none;'>" + tagArr.join(",") + "</option>");
49 
50                 }
51 
52             }
53 
54         });
55 
56         return tagArr;
57     }
58 
59     var tag1 = dropDownCk("lang1","ck1");
60     var tag2 = dropDownCk("lang2","ck2");

到一个错误。这是由于DropDownList是由JS动态添加的,因此,它的项不属于ViewState,并且不被维护,

也就是说我们无法在服务器端对其进行处理。为了解决这一问题,可以使用两种方式:1、Hidden控件保存

用户选项方式;2、Request.Form方式。(参见msdn品味Ajax)

1、我们在页面中添加一个Hidden控件,用它来保存DropDownList选项变化的信息,这样在用户选择感

兴趣的信息之后,我们就可以在服务器端获取信息,并进行处理,合理地实现客、服之间的分工。

对DropDownList控件添加一个onchange事件,此时它的html代码如下所示:

<asp:DropDownList ID="DropDownList1" runat="server" onchange="ResvItem()">
</asp:DropDownList>

Onchange事件如下所示,该事件主要保存用户选定的value:

function ResvItem(){
var objDdl = document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value = objDdl.options[objDdl.selectedIndex].value;
}

在此之后,我们使用一个asp:button控件来测验结果:

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}

到此,已经完成了所有的工作,但是还有一个问题,DropDownList的change事件只有在用户改变下拉选

项时才会触发。因此,用户使用默认选项进行提交时,则获取空值。因此我们可以在填充option时,即对

hidden初始化。对addOption事件添加一行代码如下:

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//获取对象

if(ddlObj.length>0)

delOption();//先删除所有的,之后在添加 

var optText = new Array("founder","china","beijing");

var optValue = new Array("0","1","2");
var oOption = null;

for(var i=0;i<optText.length;i++){

oOption = new Option(optText[i],optValue[i]);

ddlObj.options.add(oOption);

}
document.getElementById("HiddenField1").value = optValue[0];
}

不过以上红色部分在TT浏览器下ADD不成功,其他浏览还没试过,以下是另一个种写法:

function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);

var DeptList=Guest_UserRegister.GetDeptList(v.value).value;

var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
while(num>0)
{
for(var j=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}

}
function GetSchoolList()
{
DelOption();
var ddlProvince = document.getElementById("ddlProvince");
var ddluserSchool = document.getElementById("ddluserSchool");
var v = ddlProvince.options[ddlProvince.selectedIndex];
var DeptList=Guest_UserRegister.GetSchoolList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option"); 
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}

您可能感兴趣的文章:

  • javascript
    星级评分效果(手写)
  • javascript
    密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
  • javascript+css好多网站用的选星星实现打分功能的函数
  • 9个JavaScript评级/投票插件
  • javascript实现校验文件上传控件实例
  • JavaScript实现的日期控件具体代码
  • javascript实现日历控件(年月日关闭按钮)
  • javascript模拟评分控件实现方法

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注