JQuery UI Toggle

Question

Я пытаюсь заставить JQuery дать мне следующую настройку.Один список содержит три варианта.Один из этих параметров при нажатии откроет div.Любой из двух других вариантов показывает второй div.Я использую JQuery UI / Toggle: http://jqueryui.com/demos/toggle/. Например:

<%= 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, поэтому у меня возникли проблемы при работе с этим деломРебята, вы знаете, в чем может быть проблема?

Answer 1

Я не думаю, что привязка событий щелчка к тегам параметров будет работать вообще или даже во всех браузерах ... поэтому добавьте функцию изменения к тегу выбора и запустите эффект из этого значения. В основном замените весь ваш скрипт следующим:

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