Javascript jQueryUI切换

我试图让JQuery为我提供以下设置。一个列表框包含三个选项。单击其中一个选项将显示一个div。其他两个选项中的任何一个将显示第二个div。我正在使用JQuery UI/切换：。例如：

<%= javascript_include_tag "ui/jquery.effects.core.js", "ui/jquery.effects.blind.js", "ui/jquery.ui.core.js" %>
    <script type="text/javascript">
    //run the currently selected effect
    function runEffect1(){
        //get effect type from 
        var selectedEffect = "Blind";   
        //run the effect
        $("#effect1").toggle(selectedEffect,options,500);
    };
    function runEffect2(){
        var selectedEffect = "Blind";   
        $("#effect2").toggle(selectedEffect,options,500);
    };

    //set effect from select menu value
    $("#button").click(function() {
        runEffect1();
        return false;
    });
    // Second effect
    $("#button2").click(function() {
        runEffect2();
        return false;
    });
</script>

<select class="toggle listBox chooseProfile" id="select" name="select"> 
  <option id="button1" value="1"> <%= link_to "Default profile", :onClick => "runEffect1()", @user.normal_co_profile = 1 %> </option> 
  <option id="button2" value="2"> <%= link_to "Custom profile", :onClick => "runEffect2()", @user.normal_co_profile = 0 %> </option> 
  <option id="button2" value="3"> <%= link_to "Custom profile", :onClick => "runEffect2()", @user.normal_co_profile = 0 %> </option> 
</select> 

<div class="toggler">
  <div id="effect1"> <%= @user.default_profile %> </div>
  <div id="effect2"> <%= @user.custom_profile %>  </div>
</div>

---

我是Javascript的新手，所以我很难让这个案例成功。你们知道问题出在哪里吗？

我不认为将点击事件绑定到选项标签上会起作用，甚至不会跨所有浏览器。。。因此，向select标记添加一个change函数，并从该值运行效果。基本上用以下内容替换所有脚本：

$('#select').change(function(){
 var effect = ($(this).val() == "1") ? '#effect1' : '#effect2',
  options = {}; // where these are set in the original code?
 $(effect).toggle("Blind",options,500);
});

您确定：onClick=。。。去对地方了吗？发布HTML的输出，而不是ASP，以简化事情。