从选定的下拉项目中显示价格

Question

第一个问题！

在尝试了我在这里和其他地方发现的几样东西后--我无法让它工作。

我试着为潜在的客户选择他们想要的照片的大小，并根据他们的选择显示价格。我从一个输入框开始，那里的价格会出现，这是没有必要的，但认为它会成为一个很好的地方，价格去。在这一点上，我对任何一件事都没有兴趣。

希望有一个简单的解决方案，我忽略了仅仅是因为我不知道要搜索什么。如有任何指导，将不胜感激。

这里有一个代码链接(我希望)：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;
}

Answer 1

你可以试试这样的方法：

​

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>

​