Я новичок в программировании 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.

Спасибо, что помогли мне!

3
DVLanleyC 11 Мар 2015 в 19:12

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.

0
Dipen Adroja 11 Мар 2015 в 17:16

Вы также можете использовать 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 работал на вашем компьютере, вам нужно будет создать локальный сервер (или вы можете загрузить код на сервер).

Пожалуйста, сравните языки Прочтите здесь

0
Community 23 Май 2017 в 12:29

Попробуй это

<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 заменит содержимое div на id frisdrankSelected с текстом, выбранным из раскрывающегося списка

Вот jsfiddle, чтобы проверить это: https://jsfiddle.net/m4mphbgc/

0
Sim1 11 Мар 2015 в 16:23
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>
2
Shahar 11 Мар 2015 в 16:18

Просто чтобы объяснить
1. onclick=, чтобы прикрепить событие onClick к вашей кнопке, и оно запустит функцию внутри onClick, в данном случае myFunction.
2. используйте getElementById, чтобы получить нужный элемент
3. используйте .value, чтобы получить значение выбранной опции.
4. Вы можете использовать это значение, как хотите. используйте innerHTML для размещения в теле.

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>
3
aahhaa 11 Мар 2015 в 16:22

Предлагаю вам попробовать 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>
5
Timur Osadchiy 11 Мар 2015 в 16:16