how do I populate 2nd listbox by selecting from 1st listbox using jquery?

Question

I have two questiosn.

1)
I have a list box which gets populated depending on what I select in my 1st drop down. The data is retrieved using jQuery.get.

The code for generating the list looks like this:

(...)
foreach (DataRow row in dt.Rows)
{
    strList.Append("<option value='" + row["id"] + "'>" + row["enhetsnavn"] + "</option>");
}

I append the result to my drop down list with the following code:

var schoolsList = $("#schoolSelect");    

jQuery.get(
    site + "jQueryFunctions.ashx",
    { 
      county: county, schoolType: schoolType, instance: 'getSchoolsByCounty' },
      function(data) {
        schoolsList.append(data);
      }
);

This works great the first time. The problem is that if I select something new from the 1st ddl, it gets added to the 2nd list thus not replacing existing items.
(the list just keeps getting longer and longer).

How do I replace the list items with the new ones?

2)
If I remember correctly, populating the 2nd drop down list using jQuery will not bind the data. And if it's not bound, I'm not able to retrieve value / data using jQuery.

I think I had to use jQuery.live or something?

Answer 1

use

schoolsList.html(data);

in order to replace the content of the element instead of append() which obviously will just append the new data to it.

As for the second part I don't fully understand what data you want to bind here. The jQuery.live method is for event listeners which you don't need right now, I guess.

Your code doesn't include anything where you want to retrieve any data. If it is a form and you send it, the data will be transmitted if this is what you are concerned about.