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

Question

我正在创建一个基本的在线价格估算器，您可以在这里查看https://jsfiddle.net/gc1bbc4t/#&togetherjs=4xeUE6l7Et （代码显示在此处，但由于某些原因，它实际上并不能计算总数，因此可以在我的PC上使用）

我做到了，这样，当您选择“围栏”时，一系列高度会下降。 当前，每个防护选项都分配有一个值。 我将对此进行更改，以便为每个高度分配一个值。 我的问题是，因为我有一系列不同的高度下拉列表，这些下拉列表可能会出现，我如何确定已选择的高度并使用该高度来计算总和？

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(){...} 。

 $(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'; }

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-01-18 01:08:54

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-01-18 01:08:54

解决方案1
1 已采纳 2018-01-18 01:08:54