1

所以我想要的是一个代码，在选择各种选择框的值时显示一个 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€&lt;/div>
<div id="price2" style="display: none;">20€&lt;/div>
<div id="price3" style="display: none;">30€&lt;/div>
<div id="price4" style="display: none;">40€&lt;/div>
<div id="price5" style="display: none;">50€&lt;/div>
<div id="price6" style="display: none;">60€&lt;/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 price 2 向下滑动，等等。

有什么帮助吗？

4

2 回答 2

0

你必须添加你自己的所有if语句，但我已经让你的代码在这里工作：http: //jsfiddle.net/FRR9B/

那里有两个重要的部分。第一个是.change函数的选择器。通过将其更改为，$("form select")您将监听表单中任何选择框的更改。

下一个重要的在 if 语句中。$(this)在这里不会真正起作用，因为您要在每个选择框中查找值。相反，您需要使用$('select[name=x]')每个选择框名称替换 x。

于 2012-12-13T23:40:30.290 回答
0

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€&lt;/div>
<div id="price2" class="hiddenPrice" style="display: none;">20€&lt;/div>
<div id="price3" class="hiddenPrice" style="display: none;">30€&lt;/div>
<div id="price4" class="hiddenPrice" style="display: none;">40€&lt;/div>
<div id="price5" class="hiddenPrice" style="display: none;">50€&lt;/div>
<div id="price6" class="hiddenPrice" style="display: none;">60€&lt;/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');
});​

演示

于 2012-12-13T23:43:17.433 回答