Question

所以我想要的是在选择各种选择框的值时显示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 price 2，向下滑动，到目前为止

任何帮助？

Answer 1

您必须添加所有自己的if语句，但我已将您的代码设置为：http://jsfiddle.net/FRR9B/

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

下一个重要的是if语句。由于您在每个选择框中查找值，因此$(this)无法真正起作用。您需要使用$('select[name=x]')将x替换为每个选择框名称。

Answer 2

<强> 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

如何通过多个选择框选择向下滑动或滑动div

2 个答案: