0

jQueryといくつかの基本的なjavascript関数を使用して、価格見積もりツールを機能させようとしています。

totalドロップダウンメニューでの選択に応じて、変数の値を変更します。私の価格は単価ではないので、一連のオプションの価格を設定する必要があります。私のJSコードを見るとわかります（私が試したものは機能していません）

これが私のフィドルです。

そして、これが私のJSコードです：

var total=0;
$('#total span').text(total);


if  (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "Front Only" && document.getElementById("quantitySelect").value == "500" && document.getElementById("turnaroundSelect").value == "4 days")
{
total=150; 
}

これが私のHTMLコードです：

   <form id="calculator">

    <center>
      <label class="titleLabels">Business cards</label></center>

     <label class="formLabels">Dimensions :</label>
    <select id="sizeSelect" class="formSelects">
      <option value="3.5x2">3.5&quot; x 2&quot;</option>
      <option value="3.5x1.25">3.5&quot; x 1.25&quot;</option>
    </select>

    <label class="formLabels">Paper :</label>
    <select id="paperSelect" class="formSelects">
        <option value="14 PT 1" selected="selected">14 PT Cardstock Gloss</option>
        <option value="14 PT 2">14 PT Cardstock Matte</option>
    </select>

    <label class="formLabels">Printed :</label>
    <select id="printedSelect" class="formSelects">
        <option value="Front Only" selected="selected">Front Only</option>
        <option value="Front and Back">Front and Back</option>
    </select>

    <label class="formLabels">Quantity :</label>
    <select id="quantitySelect" class="formSelects">
            <option value="250">250</option>
            <option value="500" selected="selected">500</option>
    </select>

    <label class="formLabels">Production :</label>
    <select id="turnaroundSelect" class="formSelects">
        <option value="5 days" selected="selected">5 days</option>
        <option value="4 days">4 days</option>
    </select>

    <div id="totalBox">
        <label class="formLabels" id="total"> Total : $<span></span></label>
    </div>


<!-- hidden values -->    
    <input type="hidden" id="sizeSelect_value" value="50" name="formValues" />
    <input type="hidden" id="paperSelect_value" value="20" name="formValues" />
    <input type="hidden" id="printedSelect_value" value="0" name="formValues" />
    <input type="hidden" id="quantitySelect_value" value="25" name="formValues" />
    <input type="hidden" id="turnaroundSelect_value" value="5" name="formValues" />

    </form>​
​
4

2 に答える 2

2

これが実用的なフィドルです：http：//jsfiddle.net/manishie/72Jbe/3/

改訂されたJavascriptは次のとおりです。

var total=0;
$('#total span').text(total);

$('form').on('change', 'select', function() { 
    if  (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "0" && document.getElementById("quantitySelect").value == "30" && document.getElementById("turnaroundSelect").value == "15")
{
    total=150; 
    $('#total span').text(total);
}

});

最初の問題は、ifステートメントの2番目、3番目、4番目の部分の値ではなく、テキストの説明と照合していたことです。

2番目の問題は、これをselectタグのchangeイベントに添付する必要があることでした。

3番目の問題は、変更後に新しい合計を保存していなかったことです。

フィドルを実行し、一番下の値を4日に変更すると、機能します。</ p>

于 2012-11-02T03:14:00.963 に答える
0

あなたは実際に行を変更する必要があります

<option value="14 PT 2">14 PT Cardstock Matte</option>

に

<option value="14 PT 2" selected="selected">14 PT Cardstock Matte</option>

そして、Selectの「値」を変更するだけではありません。

あなたは次のことを行うことができます：

$("#paperSelect option[selected=selected]").removeAttr("selected") ;
$("#paperSelect option[value=" + value + "]").attr("selected","selected") ;

編集：物事をより美しくする

于 2012-11-02T03:13:05.123 に答える