Display the cost based on the selection made

I am currently working on a restaurant website and have designed a form with select options. My goal is to have a price appear for the selected option. While I know that JavaScript is the solution for this, I must admit that I am not very proficient in JavaScript.

<div class="col-md-7 col-md-offset-1">
  <div class="col-md-3">
    <label for="menu">Food: </label>
  </div>
  <div class="col-md-5">
    <select name="menu" id="menu" required>
      <option value="jollof" selected>Jollof w/ chicken</option>
      <option value="jollof">Plain Rice w/ chicken</option>
      <option value="jollof">Salad w/ chicken</option>
      <option value="jollof">Jollof w/ Fish</option>
      <option value="jollof">Plain Rice w/ chicken</option>
      <option value="jollof">Fufu w/ chicken</option>
      <option value="jollof">Fufu w/ Goat Meat</option>
      <option value="jollof">Fufu w/ Fish</option>
      <option value="jollof">Chips w/ Chicken</option>
      <option value="jollof">Chips w/ Fish</option>
    </select>
  </div>
</div>

javascripthtmlcss

Answer №1

Customize the value of the option tags to match your pricing.

var drop = document.getElementById("menu");
var price = document.getElementById("price");
drop.onchange = function() {
price.innerHTML = "$" + drop.value;
}
<div class="col-md-7 col-md-offset-1">
  <div class="col-md-3">
    <label for="menu">Food: </label>
  </div>
  <div class="col-md-5">
    <select name="menu" id="menu" required>
<option value="10" selected>Jollof w/ chicken</option>
<option value="20" >Plain Rice w/ chicken</option>
<option value="30" >Salad w/ chicken</option>
<option value="40" >Jollof w/ Fish</option>
<option value="50" >Plain Rice w/ chicken</option>
<option value="60" >Fufu w/ chicken</option>
<option value="70" >Fufu w/ Goat Meat</option>
<option value="80" >Fufu w/ Fish</option>
<option value="90" >Chips w/ Chicken</option>
<option value="100" >Chips w/ Fish</option>
</select>
  </div>
  <p id="price"></p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Favicon display in all versions of Internet Explorer

Visit my website. I have attempted multiple solutions found on Stack Overflow and different forums, yet I am unable to make it work. The code runs perfectly in all browsers except for Internet Explorer (regardless of the version) :( Can anyone provide ass ...

htmlinternet-explorerfavicon

prompting the JavaScript hangman game to identify the letters in the "selected word"

Currently, I am on a mission to teach myself Javascript and have taken on the challenge of creating a simple hangman game. This type of project is commonly used in interviews or tests, so it seemed like a great opportunity for practice. My approach involve ...

javascriptprompt

Creating a pop-up effect for a div in the center of a table cell using HTML and CSS

I am currently working with Angular and facing a challenge where I need to display a div like a popup in a table cell when clicked. Despite having the click event logic in place, I am unsure of how to achieve this without using external libraries such as B ...

javascripthtmlcssangularhtml-table

Transmitting information from directive to parent scope controller

I've successfully implemented a directive that generates a Google map on the page. Now, my goal is to pass the map object back out of the directive and into the parent controller. This will allow me to utilize it in various methods as needed. While ...

javascriptangularjsmaps

Refreshing AJAX content with a dynamically adjusting time interval

I am facing a scenario where I have a webpage featuring a countdown alongside some dynamic data refreshed via AJAX. To optimize server load, I found a clever solution by adjusting the AJAX refresh interval based on the time remaining in the countdown, foll ...

javascriptajaxrefresh

When clicked, elevate the element to the top of the window with an offset

Is there a way to click on this button, which is located within an accordion section header, and have it automatically move to the top of the page based on the window size? It seems like it should be a simple task, but sometimes after a long day things ca ...

javascriptjqueryhtml

Utilize the NPM Python Shell Callback Feature within Electron

I have a Python script that reads RFID tags when executed in the Python shell. Everything works fine with the script, but I'm facing an issue where I want to display "testing" using console.log() after the script is executed (when the tag is placed ov ...

javascriptpythonnpmcallback

What is the best way to use a regex to filter the user's input in a Vuetify combobox and generate a chip?

I am working on implementing a restriction for a specific regex pattern while the user types in a combobox to add new chips, such as allowing only phone number chips. Complete Vue Source code: https://codesandbox.io/s/chips-so-0gp7g?file=/src/domains/ex ...

javascriptvue.jscomboboxvuetify.js

Directive unable to recognize ng-pattern functionality

I am attempting to encapsulate an <input> within a directive in order to manage date validation, conversion from string to Date object, and keep the Date version in the original scope. The functionality seems to be working as intended. However, the n ...

javascriptangularjsangularjs-directiveangularjs-ng-pattern

Choosing a row in a table with ASP.NET by utilizing jQuery on click

After setting up a table in ASP.NET with the feature to select individual rows using a link at the end of each row, I have been able to successfully implement it. The process involves setting a value at the top of the view and then dynamically changing the ...

javascriptc#jqueryasp.netasp.net-mvc

Trouble with implementing a stationary header for a table on IE9?

I have successfully created a table with a fixed header and scrollable content. I utilized CSS classes "fixedHeader" for thead and "scrollContent" for tbody: thead.fixedHeader tr { position: relative; } html > body thead.fixedHeader tr { displa ...

htmlcss

Using ngrx to automatically update data upon subscription

Background The technology stack I am using for my application includes Angular 4.x, ngrx 4.x, and rxjs 5.4.x. Data is retrieved from a websocket as well as a RESTful API in order to share it between multiple components through ngrx. Currently, data is ref ...

javascriptangularrxjsngrx

Contingent upon the prop in Vue 2, determine whether to render the slot with a wrapper or

My component is simple - it just adds styling to a slot. The styling part is straightforward: it adds padding, margin, border, and background color based on the props passed. Right now, there is a wrapper component with a default slot inside. We bind class ...

javascriptvue.jsvuejs2vuejs-slotsvue-render-function

Verification of user input upon clicking the submit button within a form

I am encountering an issue with validating my form, as no errors are displayed in the console. I have followed the instructions provided by Bootstrap documentation but to no avail. My aim is to implement a feature where clicking on the button triggers an a ...

javascripthtmlformsbootstrap-5

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Here is the HTML input tag code I am working with: <form id="info"> <input id="A" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name ...

javascriptjqueryhtmljsonstringify

Adaptable layout - transitioning from a two-column design to a single-column layout

I'm facing an issue with two divs that are floated left to appear inline <div class==".container" style="width: 100%"> <div class="leftColumn" style="width: 50%; float:left"> test </div> <div class="rightColu ...

htmlcssresponsive-design

Removing or hiding elements using jQuery

My HTML code includes a select tag, and when the value changes, I want to retrieve data from the database based on this new value. The data is then displayed in a new div. This new div contains a close sign that should hide the div when clicked by the user ...

jqueryhtml

JS causes the navigator to malfunction

UPDATE: Greetings! I have developed a navigation bar that loads various pages into a specific div. Here is the source code for the navigation bar: <div id="navBar"> <ul> <li><a href="#" onClick="document.getElementById('bott ...

javascripthtmlmysqlcss

It seems that JavaScript is unable to detect newly added elements following an AJAX request

One issue I'm facing is that when an element loads data based on a clicked block, all javascript functionalities break. Currently, using Ajax, I load an entire PHP file into my index after sending a variable to it. For example: If Block 1 is clicked ...

javascriptphpjqueryajax

Error: Comparison of two objects cannot be performed in Node.js due to AssertionError

Utilizing the functions below to retrieve a value from the application and compare it with the expected value. However, encountering issues with the output displayed. Seeking assistance in resolving this matter. getEleAttribute = async function(ele, attr) ...

javascriptnode.jsprotractor