我怎樣才能讓一個div滑動或滑動多個選擇框選擇

所以我想要的是一個代碼，當選擇各種選擇框的值時顯示一個div。我怎樣才能讓一個div滑動或滑動多個選擇框選擇

這裏是我的HTML/CSS代碼：

<body> 
Selecção de produtos <br /> 
<form name="encomendaflyers"> 
<select name="flp"> 
    <option value="sf">Só Frente</option> 
    <option value="fv">Frente e verso</option> 
</select><br /><br /> 
Formato <br /> 
<select name="flf"> 
    <option value="a6">A6</option> 
    <option value="a5">A5</option> 

</select><br /><br /> 
Gramagem <br /> 
<select name="flg"> 
    <option value="80">80</option> 
    <option value="100">100</option> 
</select><br /><br /> 

</form> 

<div id="price1" style="display: none;">10€</div> 
<div id="price2" style="display: none;">20€</div> 
<div id="price3" style="display: none;">30€</div> 
<div id="price4" style="display: none;">40€</div> 
<div id="price5" style="display: none;">50€</div> 
<div id="price6" style="display: none;">60€</div>

這裏是我的jQuery代碼

<script> 
$(document).ready(function(){ 
    $("#encomenda_flyers").change(function(){ 

     if ($(this).val() == "sf" && $(this).val() == "a6" && $(this).val() == "80") { 

      $("#price1").slideDown("slow"); //Slide Down Effect 

     } else { 

      $("#price1").slideUp("fast"); //Slide Up Effect 

     } 
}); 

    }); 

$(document).ready(function(){ 
    $("#encomenda_flyers").change(function(){ 

     if ($(this).val() == "fv" && $(this).val() == "a5" && $(this).val() == "100") { 

      $("#price1").slideDown("slow"); //Slide Down Effect 

     } else { 

      $("#price1").slideUp("fast"); //Slide Up Effect 

     } 
}); 

    }); 


</script>

我需要的是，例如，當選項值SF，A6和80同時選擇顯示，div price1下滑，否則如果選擇a5，sf和80，div價格2，滑落，並且到目前爲止。

任何幫助？

來源

2012-12-13 Hugo Serra Riço

那'if'語句是永遠不會返回TRUE;因爲你是對的字符串，他們測試不能等同於一件獨特的事物。你可能的意思是：if（$（this）.val（）==「sf」|| $（this）.val（）==「a6」|| $（this）.val（）==「80」）' – Maroshii

你必須在所有自己if語句添加，但是我在這裏做你的代碼工作：http://jsfiddle.net/FRR9B/

有有兩個重要部分。第一個是.change功能的選擇器。通過將其更改爲$("form select")，您將收聽窗體中任何選擇框的更改。

下一個重要的是在if語句中。 $(this)在這裏不會真正起作用，因爲您正在每個選擇框中查找值。您需要使用$('select[name=x]')替換每個選擇框名稱的x。

來源

2012-12-13 23:40:30 Samsquanch

嘿夥計。非常感謝你的回答。幫了很多！ –

@HugoSerraRiço - 樂於助人。如果答案有幫助，你應該投票。如果答案解決了你的問題，你應該接受它：http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – 3dgoo

HTML

Selecção de produtos <br /> 
<form name="encomendaflyers"> 
    <select id="flp" name="flp"> 
     <option value="sf">Só Frente</option> 
     <option value="fv">Frente e verso</option> 
    </select> 
    <br /> 
    <br /> 
    Formato <br /> 
    <select id="flf" name="flf"> 
     <option value="a6">A6</option> 
     <option value="a5">A5</option> 
    </select> 
    <br /> 
    <br /> 
    Gramagem <br /> 
    <select id="flg" name="flg"> 
     <option value="80">80</option> 
     <option value="100">100</option> 
    </select> 
    <br /> 
    <br /> 
</form> 
<div id="price1" class="hiddenPrice" style="display: none;">10€</div> 
<div id="price2" class="hiddenPrice" style="display: none;">20€</div> 
<div id="price3" class="hiddenPrice" style="display: none;">30€</div> 
<div id="price4" class="hiddenPrice" style="display: none;">40€</div> 
<div id="price5" class="hiddenPrice" style="display: none;">50€</div> 
<div id="price6" class="hiddenPrice" style="display: none;">60€</div>

的Javascript

$(document).ready(function() { 
    $("#flp, #flf, #flg").on('change', function() { 

     if ($('#flp').val() === "sf" && $('#flf').val() === "a6" && $('#flg').val() === "80") { 
      $('.hiddenPrice').slideUp(); 
      $("#price1").slideDown("slow"); 
     } else if ($('#flp').val() === "fv" && $('#flf').val() === "a5" && $('#flg').val() === "100") { 
      $('.hiddenPrice').slideUp(); 
      $("#price2").slideDown("slow"); 
     } else { 
      $('.hiddenPrice').slideUp(); 
     } 
    }).trigger('change'); 
});

Demo

來源

2012-12-13 23:43:17 3dgoo

非常感謝！很棒！ –

我怎樣才能讓一個div滑動或滑動多個選擇框選擇

回答

相關問題