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 価格 1 が下にスライドし、そうでない場合は a5、sf、および 80 を選択すると、div 価格 2 が下にスライドします。

何か助けはありますか？

4

2 に答える 2

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 に答える
0

if独自のステートメントをすべて追加する必要がありますが、ここでコードを機能させました: http://jsfiddle.net/FRR9B/

そこには2つの重要な部分があります。最初のものは、.change関数のセレクターです。に変更すると$("form select")、フォーム内の選択ボックスの変更をリッスンします。

次に重要なものは if ステートメントにあります。$(this)各選択ボックスで値を探しているため、ここでは実際には機能しません。$('select[name=x]')代わりに、x を各選択ボックス名に置き換える必要があります。

于 2012-12-13T23:40:30.290 に答える