javascript - 二维数组计算表单中的金额，javascript

Question

我有一个订单，用户可以根据用户的选择选择图像质量(从下拉列表中)、商品类型(从单选按钮中)、光泽表面(选中复选框，然后选择 1 美元)和数量(文本框)单击计算按钮，所选项目的成本文本框应填充总金额。

(图像质量) 硬拷贝海报咖啡杯T恤(商品类型)

良好 8.99 9.99 10.99 11.99非常好 9.99 10.99 11.99 12.99优秀 10.99 11.99 12.99 13.99

例如:如果图像质量良好，则项目类型为硬拷贝，检查光泽表面且数量为 1:总金额=(8.99+1)*1。

我是 JavaScript 新手，尝试使用二维数组来计算金额，但没有得到正确的结果。感谢任何帮助。

HTML 代码:

<form id="orderform" name="orderform">
            <!--Order form-->
        <div id="items">
            Types of items
            <input type="radio" id="items" name="items" value="1" >Hard-copy Prints
            <input type="radio" id="items" name="items" value="2" >Posters
            <input type="radio" id="items" name="items" value="3" >Coffee Mugs
            <input type="radio" id="items" name="items" value="4" >T-shirts
        </div>
<div id="qualityofimage">    
        Quality of Images
            <select name="quality" id="quality">
                <option value="1" selected>Good</option>
                <option value="2">Very Good</option>
                <option value="3">Excellent</option>
            </select>
            </div>
<div>
        Glossy finish
            <input type="checkbox" name="gf" id="gf">
            </div>
        <div>Quantity
            <input type="text" id ="qty" name="qty" size="5">
            </div>
            <div><input type="button" id="calculate" value="Calculate" onclick="display()"></div>
<div>Total
          <input type="text" id="cost" name="cost" readonly="readonly">
          </div>
                </form>

Javascript

var array=[[8.99,9.99,10.99],[9.99,10.99,11.99],[10.99,11.99,12.99],[11.99,12.99,13.99]];
function display()
{
    var row = document.querySelector('input[name="quality"]:selected').value;
   var column = document.querySelector('input[name="items"]:checked').value;
    var gf=document.getElementById("gf");
    var qty=document.getElementById("qty").value;
    var total=0;
    if(gf.checked)
    {
        total= (array[row][column]+1)*qty;
    }
    else
    {
        total= (array[row][column])*qty;
    }
   document.getElementById("cost").value = total;
}

Answer 1

只有一个问题::selected 是 jQuery selector ，因此它不适用于 document.querySelector。

您可能正在寻找$("select option:selected")。

所以，它是:

var row = $('select option:selected').val();

一旦我改变了它，它就工作得很好。

Demo