HTML网站显示选项

我是HTML编程的初学者，我有以下问题。 我正在做一个简单的尝试

我有以下选择菜单：

<p>Kies de frisdrank:</p>
<select id="frisdrank">
  <option value="Cola"> Cola </option>
  <option value="Fanta"> Fanta </option>
  <option value="spuitwater"> spuitwater </option>
  <option value="chocolademelk"> chocolademelk </option>
</select>

我还有一个按钮：

    <input id="OK" type="button" value="OK">

现在，我如何在某个地方显示文本或标签，说明按下按钮时选择了什么选项？我知道这是非常基本的，但我仍然无法处理这样做

**更新**

谢谢大家的帮助！现在我知道怎么做了。 下面是我的后续问题： 我可以添加另一个具有匹配价格的文本字段吗？比如，如果你选择可乐，那么价格是20美元。如果你选择芬达，价格是25美元

我找到了javascript。我已经有了一点使用普通Java的经验

---

谢谢你帮助我

我建议您试试jQuery：

$OK.clickfunction{ $value.text$frisdrank.val； }; 基斯·德·弗里斯德兰：

可乐 芬达 污水 巧克力糖 功能a { var obj=document.getElementById'frisdrank'； document.getElementById'selected'。innerHTML=obj.options[obj.selectedIndex].innerHTML； } 基斯·德·弗里斯德兰：

可乐 芬达 污水 巧克力糖 嗨，我只是想解释一下 1.onclick=将onclick事件附加到按钮上，它将在onclick内部运行函数，本例为myFunction。 2.使用getElementById获取所需的元素 3.使用.value获取所选选项的值 4.你可以随心所欲地使用这个值。使用innerHTML在主体中放置

函数myFunction{ var-selectElement=document.getElementById'selectId'； var selectValue=selectElement.value； 警报选择值； } 1. 2. 点击试试这个

<p>Kies de frisdrank:</p>
<select id="frisdrank">
    <option value="Cola">Cola</option>
    <option value="Fanta">Fanta</option>
    <option value="spuitwater">spuitwater</option>
    <option value="chocolademelk">chocolademelk</option>
</select>
<input id="OK" type="button" value="OK" onclick="foo()">
<div id="frisdrankSelected"></div>
    <script>
        function foo() {
        var e = document.getElementById("frisdrank");
        var strUser = e.options[e.selectedIndex].value;
        document.getElementById("frisdrankSelected").innerHTML = strUser;
        }
    </script>

函数foo将用从下拉列表中选择的文本替换id为frisdrankSelected的div的内容

下面是测试它的JSFIDLE:

您也可以使用PHP

JavaScript将在计算机上运行，PHP将在服务器上运行。如果你不想让用户阅读你的代码；不要使用JavaScript

PHP示例：

<form method="POST">
    <select id="frisdrank" name="selection">
        <option value="Cola"> Cola </option>
        <option value="Fanta"> Fanta </option>
        <option value="spuitwater"> spuitwater </option>
        <option value="chocolademelk"> chocolademelk </option>
    </select>

    <input id="OK" type="submit" value="OK">
</form>

<?php
    if(isset($_POST['selection'])){
        echo "You have selected".$_POST['selection'];
    }
?>

echo将打印结果，$\u POST是一个变量

要使PHP在您的计算机上工作，您需要创建一个本地服务器，或者您可以将代码上载到服务器

---

请比较语言

您可以获得如下关联价格： JavaScript代码：

  $("#OK").click(function() {
      Var comboValue = $("#frisdrank").val();
     $("#value").text(comboValue);
      If(comboValue == "Cola")
                 $("#price").text("10");
      Else  If(comboValue == "Fanta")
                 $("#price").text("12");  
       . .  . . . .
      });

HTML代码如下所示：

   <script src="https://    ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Kies de frisdrank:</p>
<select id="frisdrank">
 <option value="Cola"> Cola </option>
 <option value="Fanta"> Fanta </option>
 <option value="spuitwater"> spuitwater          </option>
 <option value="chocolademelk">  chocolademelk </option>
 </select>
<input id="OK" type="button" value="OK">
    Selected Drink: <span id="value"></span> </br>
     Price:<span id="price"></span>

---

您只需在HTML上添加一个元素，在某些事件中，您可以更改该元素的值，甚至可以使用javascript动态创建新元素。

您需要使用javascript。Dreamweaver只是一个更复杂的记事本~真的与问题无关，如果你不熟悉其他语言，比如javascript/jquery，你会需要它，但我想如果你是从HTML开始的，你就不会有太多的概念。HTML本身并没有什么作用，只是静态页面。你想要的是一个需要这些语言的动态环境。我怎样才能在价格上增加第二个呢。那么我在哪里添加第二个值呢？