views:

1849

answers:

3

I have two listboxes in asp.net. On the click of a button I want to load a list box with the elements of the selected items in the other box. The problem is that this has to be done on the client side because when the button is clicked I don't allow it to submit. I want to call a javascript function onselectedindexchange but that is server side. any ideas? Should i be more clear?

Solution

enter code here
function Updatelist() {
    var sel = document.getElementById('<%=ListBox1.ClientID%>')
    var lst2 = document.getElementById('<%=ListBox2.ClientId %>')
    var listLength = sel.options.length;
    var list2length = lst2.options.length;
    for (var i = 0; i < listLength; i++) {
        if (sel.options[i].selected) {
            //lst2.options.add(sel.options[i].text);
            lst2.options[list2length] = new Option(sel.options[i].text);
            list2length++;
        }
    }
}
+1  A: 

Here is a good article on how to do this using Jquery.

You could also stick your drop downs in an Update Panel.

Rigobert Song
+2  A: 

Try:

 //onclick for button calls this function
 function Updatelist() {
 var sel = document.getElementbyId("list1");
 var listLength = sel.options.length;
 for(var i=0;i<listLength;i++){
    if(sel.options[i].selected)
    document.getElementByID("list2").add(new Option(sel.options[i].value));
  }
TStamper
I tried that and something similar. but 'I get object doesn't support this property or method'
Eric
make sure you're including "var" before your variable declarations and not naming your functions same names as one of your ids
TStamper
try running the code in firefox, if it does work in forefox, then its probably one of those reasons i mentioned of why it won't work in IE
TStamper
I tried what you said. It didn't work. I edited your code to what i have and it seems to like all of it but the last line. (see edited question)
Eric
I just added the final pick of what part of the list option you want, "the value or the text" I put value.
TStamper
I have a type mismatch error for text or value. Getting the Id should be document.getElementById('<%=ListBox2.ClientId %>') as opposed to document.getElementById("list2") because it is a server side control. could that be what the error is?
Eric
I posted the solution and accepted your answer. Thanks for all of your help. I had to create a new Option and put the item in a specific point in the new list everytime.
Eric
yes you had to add the items in javascript as if youwere adding to a SELECT element
TStamper
A: 
function Updatelist() {
var sel = document.getElementById('<%=ListBox1.ClientID%>')
var lst2 = document.getElementById('<%=ListBox2.ClientId %>')
var listLength = sel.options.length;
var list2length = lst2.options.length;
for (var i = 0; i < listLength; i++) {
    if (sel.options[i].selected) {
        //lst2.options.add(sel.options[i].text);
        lst2.options[list2length] = new Option(sel.options[i].text);
        list2length++;
    }
}

}

Eric