Question

我是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">

现在，我如何在某个地方显示文字或显示按下按钮时选择了哪个选项的标签？我知道这是非常基本的，但我仍然无法做到这一点。

**更新!!! **

谢谢大家的帮助！现在我想出了如何做到这一点。这是我的后续问题：我可以添加另一个匹配价格的文本字段吗？就像你选择Cola然后价格是例如20.如果你选择fanta，价格是25？

我想出了javascript。我已经对普通Java有一点经验了。

感谢您帮助我！

Answer 1

我建议你尝试jQuery：

＆＃13;

$("#OK").click(function() {
    $("#value").text($("#frisdrank").val());
});

＆＃13;

<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">
    <span id="value"></span>

＆＃13;

Answer 2

只是为了解释一下
1. onclick=将onClick事件附加到按钮上，它将运行onClick内部的函数，本例为myFunction。
2.使用getElementById获取所需的元素
3.使用.value获取所选选项的值
4.您可以随意使用该值。使用innerHTML放置在体内。

＆＃13;

function myFunction() {
  var selectElement = document.getElementById('selectId');
  var selectValue = selectElement.value;
  alert(selectValue);
}

＆＃13;

<select id='selectId'>
  <option>1</option>
  <option>2</option>
</select>
<button id='buttonId' onclick='myFunction();'>click</button>

＆＃13;

Answer 3

function a()
{
  var obj = document.getElementById('frisdrank');
  document.getElementById('selected').innerHTML = obj.options[obj.selectedIndex].innerHTML;
}

<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="a();">
<br><span id="selected">hi</span>

Answer 4

试试这个

<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的内容

这里是测试它的jsfiddle：https://jsfiddle.net/m4mphbgc/

Answer 5

您也可以使用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将打印出结果，$_POST是变量）

要让PHP在您的计算机上运行，您需要创建一个本地服务器（或者您可以将代码上传到服务器）。

请比较语言Read here

Answer 6

您可以按以下方式关联价格： 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动态创建新元素。

HTML网站显示选项

6 个答案: