HTML website display option

Question

I am a beginner in HTML programming and I have the following question. Im working on a simple try-out.

I have following selection menu:

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

I also have a button:

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

Now how do I display a text somewhere or a label that says what option is selected when I press the button? I understand this is very basic but still I cant handle to do this.

** UPDATE!!! **

Thanks everyone already for the help! Now I figured out how to do this. Here is my followup question : Can I add another textfield with a matching price? Like if you select Cola then the price is for example 20. And If you select fanta the price is 25?

I figured out the javascript. I already have a little bit experience with normal Java.

Thanks for helping me out!

and drreamweaver is just a more complex notepad~ really don't have anything to do with the question, don't need to tag that... — aahhaa, Mar 11 '15 at 16:14
if you aren't new with other languages, such as javascript/jquery, you will need that, but I guess that if you are starting with HTML, you won't have much notions of those mentioned. HTML by it's self doesn't do much, just static pages. What you want is a dynamic environment that requires those languages. — Zander, Mar 11 '15 at 16:18

score 5 · Answer 1 · answered Mar 11 '15 at 16:16

I suggest you to try jQuery:

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

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

score 3 · Answer 2 · answered Mar 11 '15 at 16:22

just to explain
1. onclick= to attach a onClick event to your button and it will run the function inside of onClick, this case myFunction.
2. use getElementById to get the element you want
3. use .value to get the value of the selected option
4. you can use that value whatever you want. use innerHTML to place in body.

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

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

score 2 · Answer 3 · answered Mar 11 '15 at 16:18

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>

How do I also add a second with a price. (So where do I add the second value?) — DVLanleyC, Mar 11 '15 at 16:33

score 0 · Answer 4 · answered Mar 11 '15 at 16:23

try this

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

the function foo will replace the content of the div with id frisdrankSelected with the text selected from the dropdown

here the jsfiddle to test it: https://jsfiddle.net/m4mphbgc/

score 0 · Answer 5 · edited May 23 '17 at 12:29

You can also use PHP.

JavaScript will run on the computer and PHP will run on the server. If you don't want the user to read your code; don't use JavaScript..

Example with 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 will print out the result and $_POST is a variable)

To get PHP working on your computer, you will need to create a local server (or you can upload the code to a server).

Please compare the languages Read here

score 0 · Accepted Answer · answered Mar 11 '15 at 17:16

You can have price associated as follow: JavaScript code:

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

HTML code will looks like this:

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

Simply you can have an element on HTML and on some event you can change value of that element or even you can create new elements dynamically using javascript.

HTML website display option

6 Answers6