Display Price from Selected Dropdown Item-CodePudding

First question!

After trying several things I've found on here and other places - I can't get this to work.

I'm trying to make a few dropdown sections for potential clients to select the size of home they want photographs of and it displays the price according to their selection. I started out with an input box where the price would appear, which isn't necessary but thought it would make a nice spot for the price to go. I'm not sold on any one thing at this point.

Hopefully, there's a simple solution that I'm overlooking simply because I don't know what to search for. Any guidance would be greatly appreciated.

Here's a link (i hope) to codepen: https://codepen.io/jmsreya-the-animator/pen/dyzbLrK

<div class="service-col">
                <h3>Real Estate Photography</h3>                     
                    <select class="itemselect" id="itemselect">
                        <option disabled hidden selected>Select  Square Footage</option>
                        <option value="$100">Under 1,499sqft</option>
                        <option value="$125">1,500-1,999sqft</option>
                        <option value="$150">2,000-2,499sqft</option>
                        <option value="$175">2,500-2,999sqft</option>
                        <option value="$200">3,000-3,499sqft</option>
                        <option value="$240">3,500-3,999sqft</option>
                        <option value="$290">4,000-4,499sqft</option>
                        <option value="$340">4,500-4,999sqft</option>
                        </select> 
                        <h4>Price: 
                        </h4>
                     
                            <span class="output"></span>

.service-col{
flex-basis: 100%;
background: #fff3f3;
border-radius: 10px;
margin: 10px;
padding: 20px 12px;
box-sizing: border-box;
transition: 0.5s;
text-align: center;
}

h3{
text-align: center;
font-weight: 300;
margin: 10px 0;
}

.price-box{
border: 1px solid black;
width: 100px;
height: 25px;
}

.output{
color: black;
}

CodePudding user response：

You could try something like this:

const itemselect = document.getElementById('itemselect')
const output = document.getElementById('output')

itemselect.addEventListener(
    'change', 
    event => output.value = event.target.value
)

.service-col {
  flex-basis: 100%;
  background: #fff3f3;
  border-radius: 10px;
  margin: 10px;
  padding: 20px 12px;
  box-sizing: border-box;
  transition: 0.5s;
  text-align: center;
}

h3 {
  text-align: center;
  font-weight: 300;
  margin: 10px 0;
}

.price-box {
  border: 1px solid black;
  width: 100px;
  height: 25px;
}

.output {
  color: black;
}

<div class="service-col">
  <h3>Real Estate Photography</h3>
  <select class="itemselect" id="itemselect">
    <option disabled hidden selected>Select Square Footage</option>
    <option value="$100">Under 1,499sqft</option>
    <option value="$125">1,500-1,999sqft</option>
    <option value="$150">2,000-2,499sqft</option>
    <option value="$175">2,500-2,999sqft</option>
    <option value="$200">3,000-3,499sqft</option>
    <option value="$240">3,500-3,999sqft</option>
    <option value="$290">4,000-4,499sqft</option>
    <option value="$340">4,500-4,999sqft</option>
  </select>
  <h4>Price: </h4><input id="output" readonly></span>