如何显示在一个HTML期权的价值选择下拉内部下拉菜单？

Question

我基于HTML / CSS和Java创建一个表单页面计算和需要显示在下拉旁边的一个选择下拉，以及由于是细胞内的选项的名称选择的选项的值。

我还没有尝试了很多，因为我不知道从哪里开始我也不能在网上找到一个确切的答案

下面有一个小提琴，我已经使用了基本的蛋糕形式的在线和删除我不需要（原谅额外的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>

当选择一个选项，我需要显示在下拉列表右侧是选项的值。如果有人即菠萝的动产（$ 5），我需要菠萝（这是值）显示的选择权

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