2010-10-19 57 views
0

我试图让jQuery来给我下面的设置。一个列表框包含三个选项。其中一个选项,单击时,将显示一个div。其他两个选项中的任何一个都会显示第二个div。我使用JQuery UI /切换:http://jqueryui.com/demos/toggle/。例如: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中的完整的新手,所以我有这种情况下的工作麻烦。你们知道问题可能是什么吗?

+0

你确定':onClick = ...'是否在正确的位置?发布HTML,不是ASP的输出,把事情简单化。 – 2010-10-19 00:45:30

回答

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