JavaScript – Show prices from selected dropdown items.

The first question!

After trying so many things I’ve found here and elsewhere – I can’t do it.

I’m trying to create a few drop-down sections for potential customers to choose the size of the house they want pictures of and it shows the price according to their choice. I started with an input box where the price would appear, which is not necessary but thought it would make a good place for the price. I’m not selling anything at the moment.

Hopefully, there’s a simple solution I’m ignoring because I don’t know what to look for. Any guidance would be greatly appreciated.

Here is a link to CodePen (I hope): 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;
}

Write a Comment

Your email address will not be published. Required fields are marked *