2010-10-19 59 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); 
});