组合框;选择时显示不同的说明文本

Combobox; Show Different Description Text Upon Selection?

本文关键字：说明 说明文 文本 显示 选择 组合      更新时间：2023-09-26

这是一个示例代码。

如果我们有 100 个选项，例如，用户选择一个选项，它会显示相应的描述。

我让它与 Jscript 一起工作，但这太长了，不能乱搞。 而且是简单的事情

这是JS版本：http://jsfiddle.net/eHwVn/

我想使用简单的HTML

<select>
  <option value="i">ItemA</option>
  <option value="i">ItemB</option>
  <option value="i">ItemC</option>
  <option value="i">ItemD</option>
  <option value="i">ItemE</option>
  <option value="i">ItemF</option>
</select>

如何使用 HTMl 为每个项目添加描述？

要得到这个：

（对不起，我还不能发布图片）https://i.stack.imgur.com/DSm4j.png

感谢您的帮助

和平！

尝试以下 JSFiddle http://jsfiddle.net/3XTjH/：

使用 HTML ：

<select id="example" onchange="showtext()">
    <option value="http://www.cnet.com" data_info="Click here for Cnet, the primer technology site on the net!">Cnet</option>
    <option value="http://www.cnn.com" data_info="Click here for CNN, one of the best sources online to get your news.">CNN</option>
    <option value="http://www.geocities.com" data_info="Click here for Geocities, and receive 10 megs of free web space.">Geocities</option>
</select>
<br>
<textarea rows=5 cols=21 wrap="virtual" id="text"></textarea>

和Javascript：

function showtext() {
    var dropdown = document.getElementById("example");
    var curOption = dropdown.options[dropdown.selectedIndex];
    var info = curOption.getAttribute('data_info');
    var txt = document.getElementById('text');
    txt.value = info;
}

每次选择新选项时，它都会查找当前选定的选项，然后查找该选项的 data_info 属性的值，并为其设置文本区域的值。

相关文章：