如何做出下拉选项来更改下拉列表下方的文本或段落

Question

我整天都在互联网上搜索，但我找不到我的问题的解决方案，我的问题对你们来说可能很简单，但作为一个新手，我真的无法清楚地解释它。在这里，我想从下拉列表中创建一个选项，当用户从选项中进行选择时，每次用户在下拉列表中更改其选择时都会显示或更改一个文本行。

• 选项 1 • 选项 2 • 选项 3 任何类型的文本

**如果用户选择选项 1，则下面会显示一个指定文本，如果用户在下拉列表中选择选项 2，则下面的文本将更改为选项2指定，则选项 3 相同。我希望你们明白我的意思。非常感谢您的帮助。

Answer 1

将函数添加到选择onchange并传递所选选项的值

function showPara(val) {
// check if the value is not empty or undefined
if (val !== undefined && val !== "") {
// then selelct all the p element which have a common class and add the coass which hide the element
document.querySelectorAll(".pClass").forEach(function(item) {
item.classList.add("hidePara");
// remove the class hide element where the id of p matches with the selected value
document.getElementById(val).classList.remove('hidePara')
})
}
}

.hidePara {
display: none;
}
.pClass {
color: red;
}

<select onchange="showPara(this.value)">
<option>Select</option>
<option value ='1'>Option 1</option>
<option value ='2'>Option 2</option>
<option value ='3'>Option 3</option>
<option value ='4'>Option 4</option>
</select>
<p id="1" class="pClass hidePara">Para 1</p>
<p id="2" class="pClass hidePara">Para 2</p>
<p id="3" class="pClass hidePara">Para 3</p>
<p id="4" class="pClass hidePara">Para 4</p>