我怎样才能让一个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滑动或滑动多个选择框选择

回答

相关问题