Dual listbox, change element not possible

The code below works fines when I "hardcode" values but when I add the runat="server" with a binding in the code behind (for the sourceList), I can't anymore add/remove element from a list to another via jQuery

Any idea ?

<div id="Global">
    <select size="10" runat="server" style="width:150px;" class="testMe" id="sourceSelect">
     </select>

    <button type="button" id="btToTarget">></button>
    <button type="button" id="btToSource"><</button>

    <select size="10" runat="server" style="width:150px;" id="targetSelect" >
    </select>    
</div>开发者_如何转开发;

$('#btToTarget').click(function() {
    $('#sourceSelect option:selected').appendTo('#targetSelect');
    return false;
});

$('#btToSource').click(function() {
    $('#targetSelect option:selected').appendTo('#sourceSelect');
    return false;
});  

That's because the ID gets changed once you add runat="server". It will look something like MainContent_Panel1_sourceSelect...

Instead use a class

<div id="Global">
    <select size="10" runat="server" style="width:150px;" class="sourceSelect" id="sourceSelect">
     </select>

    <button type="button" id="btToTarget">></button>
    <button type="button" id="btToSource"><</button>

    <select size="10" runat="server" style="width:150px;" class="targetSelect" id="targetSelect">
    </select>    
</div>

$('#btToTarget').click(function() {
    $('.sourceSelect option:selected').appendTo('#targetSelect');
    return false;
});

$('#btToSource').click(function() {
    $('.targetSelect option:selected').appendTo('#sourceSelect');
    return false;
});  

Check out the Source of the page to see what I mean..