有谁知道当我选择选项更改文本(价格)时该怎么做

Question

<div class="single-pro-details"> <!--Fix in css-->
<h6>Home / Beats</h6>
<h4>Lil Tecca Type Beat - New Love</h4>
<h2 id="price">$20</h2>
<select id="select">
<option>Select Licence</option>
<option>MP3</option>
<option>Tagged Wav</option>
<option>Un-Tagged Wav</option>
<option>Stems</option>
<option>Exlusive</option>
</select>

当我选择例如exclusive来改变价格

我开始在这个网站上寻找所以我问

Answer 1

我希望这对你有用。

// get the elements
let select = document.getElementById('select');
let price = document.getElementById('price');
// You didn't specify the prices, so I made them up
let prices = {
"Select Licence": 'Please select a licence below',
"MP3": '$15',
"Tagged Wav": '$10',
"Un-Tagged Wav": '$17',
"Stems": '$23',
"Exlusive": '$31'
}
// When the value of select changes, this event listener fires and changes the text content of price to the coresponding value from the prices object
select.addEventListener('change', () => {
price.textContent = prices[select.value];
});

<div class="single-pro-details"> <!--Fix in css-->
<h6>Home / Beats</h6>
<h4>Lil Tecca Type Beat - New Love</h4>
<h2 id="price">Please select a licence below</h2>
<select id="select">
<option>Select Licence</option>
<option>MP3</option>
<option>Tagged Wav</option>
<option>Un-Tagged Wav</option>
<option>Stems</option>
<option>Exlusive</option>
</select>