我正在创建一个基于HTML / CSS和Java的表单计算页面，需要显示从下拉列表旁边的SELECT下拉列表中选择的选项的值以及单元格内部的选项名称。
我没有尝试太多，因为我不知道从哪里开始，也找不到在线的确切答案
下面有个小提琴，我使用了在线的基本蛋糕形式，并删除了我不需要的所有字段（原谅多余的JAVA，如果它不起作用，则不想删除）
https://jsfiddle.net/Snorlaxx/x3j2d1nm/3/
<style>
#wrap {
width: 400px;
margin: 0 auto;
text-align: left;
margin-top: 8px;
padding: 5px;
background: #fff;
font-family: AvenirLTStd, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 16px;
}
#wrap .cont_details fieldset,
.cont_order fieldset {
margin: 10px;
padding: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#wrap legend {
font-size: 16px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
font-weight: bold;
font-style: italic;
padding-bottom: 10px;
}
#wrap .cont_details input {
margin-bottom: 10px;
color: #000;
}
#wrap .input1:hover,
.input1:active {}
#wrap label {
display: block;
font-size: 12px;
color: #000;
font-weight: bold;
}
#wrap label.inlinelabel {
display: inline;
}
#wrap .cont_order input {
margin-bottom: 5px;
}
#wrap .cont_order p {
padding-top: 5px;
}
#wrap input[type="radio"] {
margin-top: 8px;
margin-bottom: 8px;
}
#wrap input[type="text"]:hover,
#wrap input[type="text"]:active {
background-color: #FAF398;
}
#wrap input#submit {
margin: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
#wrap div#totalPrice {
padding: 10px;
font-weight: bold;
background-color: #ff0;
}
#wrap label.radiolabel {
font-weight: normal;
display: inline;
}
</style>
<script>
/*
This source is shared under the terms of LGPL 3
www.gnu.org/licenses/lgpl.html
You are free to use the code in Commercial or non-commercial projects
*/
//Set up an associative array
//The keys represent the size of the cake
//The values represent the cost of the cake i.e A 10" cake cost's $35
var cake_prices = new Array();
cake_prices["Round6"] = 20;
cake_prices["Round8"] = 25;
cake_prices["Round10"] = 35;
cake_prices["Round12"] = 75;
//Set up an associative array
//The keys represent the filling type
//The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
//We use this this array when the user selects a filling from the form
var filling_prices = new Array();
filling_prices["None"] = 0;
filling_prices["Lemon"] = 5;
filling_prices["Custard"] = 5;
filling_prices["Fudge"] = 7;
filling_prices["Mocha"] = 8;
filling_prices["Raspberry"] = 10;
filling_prices["Pineapple"] = 5;
filling_prices["Dobash"] = 9;
filling_prices["Mint"] = 5;
filling_prices["Cherry"] = 5;
filling_prices["Apricot"] = 8;
filling_prices["Buttercream"] = 7;
filling_prices["Chocolate Mousse"] = 12;
// getCakeSizePrice() finds the price based on the size of the cake.
// Here, we need to take user's the selection from radio button selection
function getCakeSizePrice() {
var cakeSizePrice = 0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the cake the user Chooses name=selectedCake":
var selectedCake = theForm.elements["selectedcake"];
//Here since there are 4 radio buttons selectedCake.length = 4
//We loop through each radio buttons
for (var i = 0; i < selectedCake.length; i++) {
//if the radio button is checked
if (selectedCake[i].checked) {
//we set cakeSizePrice to the value of the selected radio button
//i.e. if the user choose the 8" cake we set it to 25
//by using the cake_prices array
//We get the selected Items value
//For example cake_prices["Round8".value]"
cakeSizePrice = cake_prices[selectedCake[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the cakeSizePrice
return cakeSizePrice;
}
//This function finds the filling price based on the
//drop down selection
function getFillingPrice() {
var cakeFillingPrice = 0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
//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 insciptionPrice() {
//This local variable will be used to decide whether or not to charge for the inscription
//If the user checked the box this value will be 20
//otherwise it will remain at 0
var inscriptionPrice = 0;
//Get a refernce to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the checkbox id="includeinscription"
var includeInscription = theForm.elements["includeinscription"];
//If they checked the box set inscriptionPrice to 20
if (includeInscription.checked == true) {
inscriptionPrice = 20;
}
//finally we return the inscriptionPrice
return inscriptionPrice;
}
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 cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice() + insciptionPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'block';
divobj.innerHTML = "Total Price For the Cake $" + cakePrice;
}
function hideTotal() {
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'none';
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cake Form</title>
<script type="text/javascript" src="js/formcalculations.js"></script>
<link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
</head>
<body onload='hideTotal()'>
<div id="wrap">
<form action="" id="cakeform" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<legend>Make your cake!</legend>
<label>Filling</label>
<select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
<option value="Pineapple">Pineapple($5)</option>
<option value="Dobash">Dobash($9)</option>
<option value="Mint">Mint($5)</option>
<option value="Cherry">Cherry($5)</option>
<option value="Apricot">Apricot($8)</option>
<option value="Buttercream">Buttercream($7)</option>
<option value="Chocolate Mousse">Chocolate Mousse($12)</option>
</select>
<br/>
<br/>
<div id="totalPrice"></div>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form>
</div>
<!--End of wrap-->
</body>
</html>
选择一个选项后，我需要在下拉菜单的右侧显示该选项的值。例如，如果有人选择了Pineapple（$ 5），我需要在选择右侧显示Pineapple（这是值）
答案 0 :(得分：1)
要显示所选选项的值，我在下拉列表的右侧添加了一个容器，并且在更改下拉列表时，使用innerHTML将所选选项的值移动到了容器中：
window.onload = hideTotal();
/*
This source is shared under the terms of LGPL 3
www.gnu.org/licenses/lgpl.html
You are free to use the code in Commercial or non-commercial projects
*/
//Set up an associative array
//The keys represent the size of the cake
//The values represent the cost of the cake i.e A 10" cake cost's $35
var cake_prices = new Array();
cake_prices["Round6"] = 20;
cake_prices["Round8"] = 25;
cake_prices["Round10"] = 35;
cake_prices["Round12"] = 75;
//Set up an associative array
//The keys represent the filling type
//The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
//We use this this array when the user selects a filling from the form
var filling_prices = new Array();
filling_prices["None"] = 0;
filling_prices["Lemon"] = 5;
filling_prices["Custard"] = 5;
filling_prices["Fudge"] = 7;
filling_prices["Mocha"] = 8;
filling_prices["Raspberry"] = 10;
filling_prices["Pineapple"] = 5;
filling_prices["Dobash"] = 9;
filling_prices["Mint"] = 5;
filling_prices["Cherry"] = 5;
filling_prices["Apricot"] = 8;
filling_prices["Buttercream"] = 7;
filling_prices["Chocolate Mousse"] = 12;
// getCakeSizePrice() finds the price based on the size of the cake.
// Here, we need to take user's the selection from radio button selection
function getCakeSizePrice() {
var cakeSizePrice = 0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the cake the user Chooses name=selectedCake":
var selectedCake = theForm.elements["selectedcake"];
//Here since there are 4 radio buttons selectedCake.length = 4
//We loop through each radio buttons
for (var i = 0; i < selectedCake.length; i++) {
//if the radio button is checked
if (selectedCake[i].checked) {
//we set cakeSizePrice to the value of the selected radio button
//i.e. if the user choose the 8" cake we set it to 25
//by using the cake_prices array
//We get the selected Items value
//For example cake_prices["Round8".value]"
cakeSizePrice = cake_prices[selectedCake[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the cakeSizePrice
return cakeSizePrice;
}
//This function finds the filling price based on the
//drop down selection
function getFillingPrice() {
var cakeFillingPrice = 0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//
var showValue = document.getElementById("showValue");
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
// Show the value of the selected option
showValue.innerHTML = selectedFilling.value;
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
//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 insciptionPrice() {
//This local variable will be used to decide whether or not to charge for the inscription
//If the user checked the box this value will be 20
//otherwise it will remain at 0
var inscriptionPrice = 0;
//Get a refernce to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the checkbox id="includeinscription"
var includeInscription = theForm.elements["includeinscription"];
//If they checked the box set inscriptionPrice to 20
if (includeInscription.checked == true) {
inscriptionPrice = 20;
}
//finally we return the inscriptionPrice
return inscriptionPrice;
}
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 cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice() + insciptionPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'block';
divobj.innerHTML = "Total Price For the Cake $" + cakePrice;
}
function hideTotal() {
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'none';
}#wrap {
width: 400px;
margin: 0 auto;
text-align: left;
margin-top: 8px;
padding: 5px;
background: #fff;
font-family: AvenirLTStd, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 16px;
}
#wrap .cont_details fieldset,
.cont_order fieldset {
margin: 10px;
padding: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#wrap legend {
font-size: 16px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
font-weight: bold;
font-style: italic;
padding-bottom: 10px;
}
#wrap .cont_details input {
margin-bottom: 10px;
color: #000;
}
#wrap .input1:hover,
.input1:active {}
#wrap label {
display: block;
font-size: 12px;
color: #000;
font-weight: bold;
}
#wrap label.inlinelabel {
display: inline;
}
#wrap .cont_order input {
margin-bottom: 5px;
}
#wrap .cont_order p {
padding-top: 5px;
}
#wrap input[type="radio"] {
margin-top: 8px;
margin-bottom: 8px;
}
#wrap input[type="text"]:hover,
#wrap input[type="text"]:active {
background-color: #FAF398;
}
#wrap input#submit {
margin: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
#wrap div#totalPrice {
padding: 10px;
font-weight: bold;
background-color: #ff0;
}
#wrap label.radiolabel {
font-weight: normal;
display: inline;
}<div id="wrap">
<form action="" id="cakeform" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<legend>Make your cake!</legend>
<label>Size</label>
<input type="radio" name="selectedcake" value="Round6" required onchange="calculateTotal()"> 6"
<input type="radio" name="selectedcake" value="Round8" required onchange="calculateTotal()"> 8"
<input type="radio" name="selectedcake" value="Round10" required onchange="calculateTotal()"> 10"
<input type="radio" name="selectedcake" value="Round12" required onchange="calculateTotal()"> 12"<br><br>
<label>Filling</label>
<select id="filling" name='filling' onchange="calculateTotal()" required>
<option value="">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
<option value="Pineapple">Pineapple($5)</option>
<option value="Dobash">Dobash($9)</option>
<option value="Mint">Mint($5)</option>
<option value="Cherry">Cherry($5)</option>
<option value="Apricot">Apricot($8)</option>
<option value="Buttercream">Buttercream($7)</option>
<option value="Chocolate Mousse">Chocolate Mousse($12)</option>
</select> <span id="showValue"></span>
<br/><br/> Include candles <input type="checkbox" name="includecandles" id="includecandles" onchange="calculateTotal()">
<br/><br/> Include inscription <input type="checkbox" name="includeinscription" id="includeinscription" onchange="calculateTotal()">
<br/><br/>
<div id="totalPrice"></div>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form>
</div>