如何将下拉菜单项打印为文本框中的列表

Question

我正在尝试获得一个包含几个选项的下拉菜单，我可以打印总价，但我想添加其他内容，例如写在此处部分的所选选项的名称。例如，如果我的选项的值为 20，我想像 HERE -> 20 一样打印它，但无法实现。

这是我的代码 link：

   <script type="text/javascript">
     function calculatePrice(){

    //Get selected data  
    var elt = document.getElementById("foodItem");
    var food = elt.options[elt.selectedIndex].value;

    elt = document.getElementById("drinkItem");
    var drink = elt.options[elt.selectedIndex].value;

    elt = document.getElementById("desertItem");
    var desert = elt.options[elt.selectedIndex].value;
    
    elt = document.getElementById("tipItem");
    var tip = elt.options[elt.selectedIndex].value;

    //convert data to integers
    food = parseInt(food);
    drink = parseInt(drink);
    desert = parseInt(desert);
    tip = parseInt(tip);

    //calculate total value  
    var total = food+drink+desert+tip; 

    //print value to  PicExtPrice 
    document.getElementById("totalPrice").value=total;

}
  </script>
  <br><br><br><br><br><br>
<center>
<FORM Name="myform">
    <SELECT NAME="foodItem" onChange="calculatePrice()" id="foodItem">
       <OPTION value="0">Select your food</OPTION>
       <OPTION value="35">Anthic Steak </OPTION>
       <OPTION value="20">Anthic Lasagna </OPTION>
       <OPTION value="15">Anthic Pasta </OPTION>
    </SELECT>

    <SELECT NAME="drinkItem" onChange="calculatePrice()" id="drinkItem">
       <OPTION value="0">Select your drink</OPTION>
       <OPTION value="5">Coke </OPTION>
       <OPTION value="10">Spritz </OPTION>
       <OPTION value="15">Beer </OPTION>
    </SELECT>

    <SELECT NAME="desertItem" onChange="calculatePrice()" id="desertItem">
       <OPTION value="0">Select your desert</OPTION>
       <OPTION value="15">Baklava </OPTION>
       <OPTION value="20">Sütlaç </OPTION>
       <OPTION value="25">Sufle </OPTION>
    </SELECT>

    <SELECT NAME="tipItem" onChange="calculatePrice()" id="tipItem">
        <OPTION value="0">Would you like to tip?</OPTION>
        <OPTION value="0">No,thanks. </OPTION>
        <OPTION value="10">10TL </OPTION>
        <OPTION value="15">15TL </OPTION>
        <OPTION value="20">20TL </OPTION>

     </SELECT>
</FORM>

<br><br>The amount you have to pay:<br><br><INPUT type="text" id="totalPrice" Size=8>
<script>
</script>
</body>
</center>
</html>

我将创建一个更大的文本框，我想将它们列为；
Anthic 牛排 -> 20TL
饮料 -> 10TL
沙漠 -> 5TL
提示 -> 10TL
总价 -> 45TL

如果您有任何想法，请告诉我。

Answer 1

您的代码非常简洁，您现有的函数 calculatePrice 可以使用额外的代码片段来创建您所解释的结算摘要。您当前正在使用变量 elt 通过 Id 获取所有元素，这些元素可以保持唯一，以便您以后可以使用它们来获取下拉列表的 text 值，并且创建一个摘要。最后，您可以使用其 id 将此摘要添加到一个空标签（比如 div）。这是对 JavaScript:

的更改


    function calculatePrice() {

        //Get selected data  
        var foodElt = document.getElementById("foodItem");
        var food = foodElt.options[foodElt.selectedIndex].value;

        var drinkElt = document.getElementById("drinkItem");
        var drink = drinkElt.options[drinkElt.selectedIndex].value;

        desertElt = document.getElementById("desertItem");
        var desert = desertElt.options[desertElt.selectedIndex].value;

        tipElt = document.getElementById("tipItem");
        var tip = tipElt.options[tipElt.selectedIndex].value;

        //convert data to integers
        food = parseInt(food);
        drink = parseInt(drink);
        desert = parseInt(desert);
        tip = parseInt(tip);

        //calculate total value  
        var total = food + drink + desert + tip;

        //print value to  PicExtPrice 
        document.getElementById("totalPrice").value = total;

        var summary = '';
        if (food > 0) {
            summary += foodElt.options[foodElt.selectedIndex].text + ' : ' + food + '\n';
        }
        if (drink > 0) {
            summary += drinkElt.options[drinkElt.selectedIndex].text + ' : ' + drink + '\n';
        }
        if (desert > 0) {
            summary += desertElt.options[desertElt.selectedIndex].text + ' : ' + desert + '\n';
        }
        if (tip > 0) {
            summary += 'Tip' + ' : ' + tip + '\n';
        }

        document.getElementById("summary").innerHTML = summary;

    }

这是对 HTML 的补充：

<div id="summary"></div>

注意：您可以简单地使用相同的变量 elt，但您必须在线管理汇总计算 ;)

如何将下拉菜单项打印为文本框中的列表

How to print drop down menu items as a list in a textbox

html

javascript

forms

drop-down-menu