Question

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

•选项1 •备选方案2 •备选方案3 任何类型的文字

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

Answer 1

向select onchange添加一个函数并传递所选选项的值

＆＃13;

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')
    })
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何进行下拉选项以更改下拉列表下方的文本或段落

1 个答案: