Question

我正在创建一个基本的在线价格估算工具，你可以在这里查看https://jsfiddle.net/gc1bbc4t/#&togetherjs=4xeUE6l7Et（代码显示在这里，但由于某种原因，它实际上并没有计算总数，它在我的电脑上确实）

我已经做到了这一点，当你选择＆＃34;击剑＆＃34;时，一系列的高度会下降。目前，每个防护选项都有一个分配给它的值。我将更改此值，以便每个高度都分配一个值。我的问题是，因为我有一系列不同的高度下拉可能会出现如何确定哪些被选中并使用它来计算总数？

HTML -

<!doctype HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Price Estimator</title>
    <script type="text/javascript" src="estimatorcalculations.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
</head>

<body onload='hideTotal()'>
<form action="" id="cakeform" onsubmit="return false;">
   <fieldset>
    <legend>Estimate the cost of your fence</legend>

    <label >Fencing</label>

    <select id="fencing" name='fencing' onchange="calculateTotal()">
        <option value="None">Select Fencing</option>
        <option value="premiumTimber">Premium Timber</option>
        <option value="roughSawnTimber">Rough Sawn Timber</option>
    </select>

    <div class="container">
    <div class="premiumTimber">
        <label>Height</label>
        <select class="second-level-select">
            <option value="">-Height-</option>
            <option value="basic-ore-1">1m</option>
            <option value="basic-ore-2">2m</option>
        </select>
    </div>
    <div class="roughSawnTimber">
        <select class="second-level-select">
            <option value="">-Height-</option>
            <option value="omber-miner-1">1.5m</option>
            <option value="omber-miner-2">2.5m</option>
        </select>
    </div>
    </div>

    <br/>
    <label>Length (metres):</label> <input type="text"  name="mLength" onchange="calculateTotal()" id="mLength" />
    <br/>


    <label for='includecandles' class="inlinelabel">Do you need a fence removed?($5)</label>
    <input type="checkbox" id="includecandles" name='includecandles' onclick="calculateTotal()" />


    <div id="totalPrice"></div>

    </fieldset>
</form>
</body>
</html>

<script>
$(document).ready(function() {
    $('#fencing').bind('change', function() {
        var elements = $('div.container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');

    $('.second-level-select').bind('change', function() {
        var elements = $('div.second-level-container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');
});
</script>

JS -

var fencing_prices= new Array();
fencing_prices["None"]=0;
fencing_prices["premiumTimber"]=10;
fencing_prices["roughSawnTimber"]=5;

//This function finds the filling price based on the
//drop down selection
function getFencingPrice()
{
    var cakeFencingPrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the select id="fencing"
     var selectedFencing = theForm.elements["fencing"];

    //set cakeFilling Price equal to value user chose
    //For example filling_prices["Lemon".value] would be equal to 5
    cakeFencingPrice = fencing_prices[selectedFencing.value];

    //finally we return cakeFillingPrice
    return cakeFencingPrice;
}

function getLength()
{
    //Assume form with id="theform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the TextBox
    var quantity = theForm.elements["mLength"];
    var howmany =0;
    //If the textbox is not blank
    if(quantity.value!="")
    {
        howmany = parseInt(quantity.value);
    }
    return howmany;
}
function getHeight() {
    var theForm = document.forms["cakeform"];

}
/*
function getHeight()
{
    //Assume form with id="theform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the TextBox
    var quantity = theForm.elements["mHeight"];
    var howmany =0;
    //If the textbox is not blank
    if(quantity.value!="")
    {
        howmany = parseInt(quantity.value);
    }
    return howmany;
}
*/

//candlesPrice() finds the candles price based on a check box selection
function candlesPrice()
{
    var candlePrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the checkbox id="includecandles"
    var includeCandles = theForm.elements["includecandles"];

    //If they checked the box set candlePrice to 5
    if(includeCandles.checked==true)
    {
        candlePrice=5;
    }
    //finally we return the candlePrice
    return candlePrice;
}


function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var fencePrice = (getFencingPrice() * getLength())+ candlesPrice();

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total price for the fence $"+fencePrice;

}


function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

Answer 1

执行以下操作：

您可以从可见下拉列表中获得高度
从下拉列表中移除onchange=calculateTotal并将其放在$('#fencing').bind('change', function(){...}内。

＆＃13;

$(document).ready(function() {
    $('#fencing').bind('change', function() {
        calculateTotal();
       
        var elements = $('div.container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');
    
    $('.second-level-select').bind('change', function() {
        var elements = $('div.second-level-container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');
});

hideTotal();


var fencing_prices= new Array();
fencing_prices["None"]=0;
fencing_prices["premiumTimber"]=10;
fencing_prices["roughSawnTimber"]=5;

//This function finds the filling price based on the
//drop down selection
function getFencingPrice() {
    var cakeFencingPrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the select id="fencing"
     var selectedFencing = theForm.elements["fencing"];

    //set cakeFilling Price equal to value user chose
    //For example filling_prices["Lemon".value] would be equal to 5
    cakeFencingPrice = fencing_prices[selectedFencing.value];

    //finally we return cakeFillingPrice
    return cakeFencingPrice;
}

function getLength() {
    //Assume form with id="theform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the TextBox
    var quantity = theForm.elements["mLength"];
    var howmany =0;
    //If the textbox is not blank
    if(quantity.value!="")
    {
        howmany = parseInt(quantity.value);
    }
    return howmany;
}
function getHeight() {
    var theForm = document.forms["cakeform"];

}

function getHeight() {
    if ($('.premiumTimber').find('select').is(":visible")) {
        return $('.premiumTimber').find('select').val();
    } else {
        return $('.roughSawnTimber').find('select').val();
    }
}


//candlesPrice() finds the candles price based on a check box selection
function candlesPrice() {
    var candlePrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the checkbox id="includecandles"
    var includeCandles = theForm.elements["includecandles"];

    //If they checked the box set candlePrice to 5
    if(includeCandles.checked==true)
    {
        candlePrice=5;
    }
    //finally we return the candlePrice
    return candlePrice;
}


function calculateTotal() {
    $('#selectedh').html(getHeight());
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var fencePrice = (getFencingPrice() * getLength())+ candlesPrice();

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total price for the fence $"+fencePrice;

}


function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

＆＃13;

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form action="" id="cakeform" onsubmit="return false;">
   <fieldset>
    <legend>Estimate the cost of your fence</legend>
 
    <label >Fencing</label>
 
    <select id="fencing" name='fencing' >
		<option value="None">Select Fencing</option>
		<option value="premiumTimber">Premium Timber</option>
		<option value="roughSawnTimber">Rough Sawn Timber</option>
    </select>
	
	<div class="container">
    <div class="premiumTimber">
		<label>Height</label>
        <select class="second-level-select" onchange="calculateTotal()">
            <option value="">-Height-</option>
            <option value="basic-ore-1">1m</option>
            <option value="basic-ore-2">2m</option>
        </select>
    </div>
    <div class="roughSawnTimber">
        <select class="second-level-select" onchange="calculateTotal()">
            <option value="">-Height-</option>
            <option value="omber-miner-1">1.5m</option>
            <option value="omber-miner-2">2.5m</option>
        </select>
    </div>
	</div>

    <br/>
	<label>Length (metres):</label> <input type="text"  name="mLength" onchange="calculateTotal()" id="mLength" />
	<br/>
	
		
	<label for='includecandles' class="inlinelabel">Do you need a fence removed?($5)</label>
    <input type="checkbox" id="includecandles" name='includecandles' onclick="calculateTotal()" />

    <p>Selected Height</p>
    <p id='selectedh'></p>
    <div id="totalPrice"></div>
 
    </fieldset>
</form>

＆＃13;

如何从动态下拉菜单中获取价值

1 个答案: