JQuery UI Toggle

Question

I am trying to get JQuery to give me the following setup. One listbox contains three options. One of these options, when clicked, will reveal a div. Either of the other two options reveal a second div. I am using JQuery UI/Toggle: http://jqueryui.com/demos/toggle/. For example:

<%= 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>

I am a complete newbie at Javascript so I am having trouble getting this case to work. Do you guys know what the problem might be?

Answer 1

I don't think binding click events to the option tags will work at all or even across all browsers... so add a change function to the select tag and run the effect from that value. Basically replace all your script with this:

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