兩個ListBox之間的互動,無疑有兩個辦法:一個是在伺服器端與用戶端不停的PostBack,這無疑會大大降低效率。這是就體現出JavaScript在用戶端的優勢。下面介紹一下,又不足的地方希望大家指出!
下面是JS代碼:用四個函數分別對應四個按鈕,完成該功能。
<script type="text/javascript">
function SelectAll()
{
var lst1=window.document.getElementById("<%=lb_Sourse.ClientID %>");
var length = lst1.options.length;
var string = window.document.getElementById("<%=hf_NewName.ClientID %>")
for(var i=0;i<length;i++)
{
var v = lst1.options[i].value;
var t = lst1.options[i].text;
var lst2=window.document.getElementById("<%=lb_NewName.ClientID %>");
lst2.options[i] = new Option(t,v,true,true);
string.value+=v;
}
}
function DelAll()
{
var lst2=window.document.getElementById("<%=lb_NewName.ClientID %>");
var length = lst2.options.length;
for(var i=length;i>0;i--)
{
lst2.options[i-1].parentNode.removeChild(lst2.options[i-1]);
}
}
function SelectOne()
{
var string = window.document.getElementById("<%=hf_NewName.ClientID %>")
var lst1=window.document.getElementById("<%=lb_Sourse.ClientID %>");
var lst2=window.document.getElementById("<%=lb_NewName.ClientID %>");
var lstindex=lst1.selectedIndex;
var length = lst2.options.length;
var isExists = false;
if(lstindex<0)
return;
else if(length != null)
{
for(var i=0;i < length; i++)
{
if(lst2.options[i].text == lst1[lstindex].text&&lst2.options[i].value == lst1[lstindex].value)
{
isExists = true;
}
}
}
else
{
return;
}
if (isExists == false)
{
var v = lst1.options[lstindex].value;
var t = lst1.options[lstindex].text;
lst2.options[lst2.options.length] = new Option(t,v,true,true);
string.value+=v;
}
else
{
alert("所選條目已經存在");
return false;
}
}
function DelOne()
{
var lst2=window.document.getElementById("<%=lb_NewName.ClientID %>");
var lstindex=lst2.selectedIndex;
if(lstindex>=0)
{
var v = lst2.options[lstindex].value+";";
lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]);
}
}
</script>
需要解釋的是由於JS指令碼是在用戶端執行的,因此伺服器端控制項是無法調用JS的,由於ID無法被找到,但用<%=lb_NewName.ClientID %>的方法就巧妙的解決得該問題,是asp控制項擁有用戶端id,這樣就可以調用了。
希望對大家有所協助!