将“select”下拉列表转换为列表淹没后，div show/hide 停止工作

问：

我想要的不是“选择”类型的下拉列表，而是 ul。但是，在转换为 ul 后，我的 javascript 没有触发，我不知道为什么。它非常适合作为选择...我错过了什么吗？

这是原始选择（工作）

<div class="container">
    <select id="selector1" name="divshowhide">
      <option selected disabled value="null">Sort By:</option>
      <option value="#Online-holder">Online Now</option>
      <option value="#Lowest-holder">Lowest Price First</option>
      <option value="#Best-holder">Best Rating First</option>
    </select>
</div>

这是ul版本：（不工作）

<li><a href="#">Sort</a>
    <ul class="dropdown" id="selector1">
        <li><a href="#" value="Online-holder">Online Now</a></li>
        <li><a href="#" value="Lowest-holder">Lowest Price First</a></li>
        <li><a href="#" value="Alpha-holder">Alpha</a></li>
    </ul>
</li>

下面是 javascript：

<script type="text/javascript"> 
$(document).ready(function() {

  $('#Online-holder').show();
  $('#Online-link').click(function() {
    $('#Online').toggle(400);
    return false;
  });


  $('#Lowest-holder').hide();
  $('#Lowest-link').click(function() {
    $('#Lowest').toggle(400);
    return false;
  });


  $('#Alpha-holder').hide();
  $('#Alpha-link').click(function() {
    $('#Alpha').toggle(400);
    return false;
  });

});

jQuery("#selector1").change(function(){
    var div = jQuery(this).val();
    $('.holder').hide(200);
    jQuery(div).show(200);
});
</script>

帮助！谢谢！