Двойной список, изменить элемент невозможно

Question

Приведенный ниже код прекрасно работает, когда я "жестко кодирую" значения, но когда я добавляю runat = "server" с привязкой в ​​коде позади (для sourceList), я больше не могу добавлять / удалять элемент из списка вдругой через jQuery

Есть идеи?

<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;
});  

Answer 1

Это потому, что идентификатор меняется после добавления runat = "server". Это будет выглядеть примерно так: MainContent_Panel1_sourceSelect ...

Вместо этого используйте класс

<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;
});  

Проверьте Источник страницы, чтобы понять, что я имею в виду ..