Javascript 使用JQuery在ASP.Net中的两个列表框之间移动项目
我想使用JQuery/Javascript在ASP.Net中的两个列表框之间移动项目,下面是我的代码,它工作得非常好Javascript 使用JQuery在ASP.Net中的两个列表框之间移动项目,javascript,jquery,asp.net,javascript-events,listbox,Javascript,Jquery,Asp.net,Javascript Events,Listbox,我想使用JQuery/Javascript在ASP.Net中的两个列表框之间移动项目,下面是我的代码,它工作得非常好 function AddItems() { var totalItemsSelected = 0; var CurrentItems = 0; var MessageLabel = document.getElementById('<%=lblITProgrammingMessage.ClientID%>'); var selected
function AddItems() {
var totalItemsSelected = 0;
var CurrentItems = 0;
var MessageLabel = document.getElementById('<%=lblITProgrammingMessage.ClientID%>');
var selectedOptions = jQuery('#<%=ListITProgramming.ClientID %> option:selected');
if (selectedOptions.length == 0) {
MessageLabel.innerHTML = "Please select skill(s) to add.";
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeOut(2000, function () { MessageLabel.innerHTML = ""; });
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeIn(500, function () { });
return false;
}
jQuery('select[name$=ListMyITProgramming] > option').each(function () { CurrentItems++; });
if (CurrentItems == 30) {
MessageLabel.innerHTML = "Maximum limit (30) is reached. You cannot add any more skills.";
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeOut(2000, function () { MessageLabel.innerHTML = ""; });
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeIn(500, function () { });
return false;
}
totalItemsSelected = CurrentItems + selectedOptions.length;
if (totalItemsSelected > 30) {
MessageLabel.innerHTML = "You can only select " + (30 - CurrentItems) + " item(s) more.";
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeOut(2000, function () { MessageLabel.innerHTML = ""; });
jQuery('#<%= lblITProgrammingMessage.ClientID %>').fadeIn(500, function () { });
return false;
}
if (selectedOptions.length == 1) {
if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + selectedOptions.val() + "']").length > 0) {
}
else {
jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(selectedOptions).clone());
}
}
else if (selectedOptions.length > 1) { jQuery(selectedOptions).each(function () { if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + this.value + "']").length > 0) { } else { jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(this).clone()); } }); }
jQuery(selectedOptions).remove();
var hdn2 = "";
jQuery('select[name$=ListMyITProgramming] > option').each(function () { hdn2 += jQuery(this).attr('value') + ','; });
jQuery("#<%= listMyITProgrammingValues.ClientID %>").val(hdn2);
return false;
}
函数AddItems(){
var totalItemsSelected=0;
var CurrentItems=0;
var MessageLabel=document.getElementById(“”);
var selectedOptions=jQuery(“#选项:selected”);
如果(selectedOptions.length==0){
MessageLabel.innerHTML=“请选择要添加的技能。”;
jQuery('#').fadeOut(2000,函数(){MessageLabel.innerHTML=”“});
fadeIn(500,函数(){});
返回false;
}
jQuery('select[name$=ListMyITProgramming]>option')。每个(函数(){CurrentItems++;});
如果(CurrentItems==30){
MessageLabel.innerHTML=“已达到最大限制(30)。您不能再添加任何技能。”;
jQuery('#').fadeOut(2000,函数(){MessageLabel.innerHTML=”“});
fadeIn(500,函数(){});
返回false;
}
totalItemsSelected=CurrentItems+selectedOptions.length;
如果(选择的项目总数>30){
MessageLabel.innerHTML=“您只能选择“+(30-CurrentItems)+”项或更多项。”;
jQuery('#').fadeOut(2000,函数(){MessageLabel.innerHTML=”“});
fadeIn(500,函数(){});
返回false;
}
如果(selectedOptions.length==1){
if(jQuery(“#option[value='”+selectedOptions.val()+“]”)长度>0){
}
否则{
jQuery('#').append(jQuery(selectedOptions.clone());
}
}
else if(selectedOptions.length>1){jQuery(selectedOptions).each(函数(){if(jQuery(“#option[value=”+this.value+“]”).length>0){}else{jQuery('#').append(jQuery(this.clone());}})
jQuery(selectedOptions).remove();
var hdn2=“”;
jQuery('select[name$=ListMyITProgramming]>option')。每个(函数(){hdn2+=jQuery(this.attr('value')+,';});
jQuery(“#”)val(hdn2);
返回false;
}
但这段代码仅限于一组列表框,因为我已经硬编码了列表框名称“ListITProgramming”和“ListMyITProgramming”
任何人都可以在现有函数中使用两个参数来实现此动态功能吗?用一个已知的硬编码ID将列表控件括在一个老式HTML标记中。例如:
<DIV id="List1Container">
<ASP:ListBox runat="server" id="list1"/>
</DIV>
在Javascript中,使用div的ID(List1Container)和jquery的“:first child”选择器访问列表控件。塔达!现在,您可以在不知道其ID的情况下引用列表控件,这样就不必再进行混乱的代码注入
好处:使用这种技术,您现在可以编写完全静态的.js文件,这意味着您可以使用缩小和缓存,并大大提高性能。只是不要硬编码。您将使代码更易于扩展并为您自己和其他人修复扫描您请帮助我连接列表框名称,就像我尝试使用“var selectedOptions=jQuery('#