将列表显示为<选项值＝"">

Displaying a list as an <option value="">

本文关键字：quot 列表显示 gt 选项 lt      更新时间：2023-09-26

这是我的困惑：

我希望创建一个下拉菜单，在选择时显示信息列表。

到目前为止我的编码：

<script type="text/javascript">
    function dropdownTip(value) {
        console.log(value);
        document.getElementById("result").innerHTML = value;
    }
</script>
<select onchange="dropdownTip(this.value)">
    <option value="Printer List" selected="" disabled="">Printers</option>
    <option value="Printer A">HP</option>
    <option value="Printer B">Zebra</option>
    <option value="Printer C">Lexmar</option>
    <option value="Printer D">Qual</option>
</select>
<div id="result"></div>

基本上我想做的是：

  1. 用户选择选项值

  2. 选择选项值后，我会在下拉列表下方显示一个预定义的数据集/列表(请参见下文(。

    打印机名称：GRHPCOLOR1
    IP地址：xxx.xxx.xxx.xxxx
    纸张类型：仅限LaserJet
    服务电话：1(800(XXX-XXXX

  3. 一旦用户选择了不同的选项值，则与每个新选项相关联的数据集将替换以前的选项。

有人知道我怎么能简单地做到这一点吗？

您可以以JSON对象的形式创建预定义的数据集并保存数据。并使用与您的选项值相同的对象的键。

<script type="text/javascript">
var printList = {
    'Printer A' : { Name : 'HP' , Model : 'HP2001'},
    'Printer B' : { Name : 'HP1' , Model : 'HP120434'},
    'Printer C' : { Name : 'HP2' , Model : 'HP22034'},
    'Printer D' : { Name : 'HP3' , Model : 'HP320tr3'}
    };
    function dropdownTip(value) {
        console.log(value);
        var displayHTML ='value';
        displayHTML += '</br>Name='+printList[value].Name+'</br>';
        displayHTML += 'Model='+printList[value].Model;
        document.getElementById("result").innerHTML = displayHTML;
    }
</script>
<select onchange="dropdownTip(this.value)">
    <option value="Printer List" selected="" disabled="disabled">Printers</option>
    <option value="Printer A">HP</option>
    <option value="Printer B">Zebra</option>
    <option value="Printer C">Lexmar</option>
    <option value="Printer D">Qual</option>
</select>
<div id="result"></div>

这是显示预定义数据集结果的最简单方法。

试试这个(使用switch语句设置细节(

html:

<select onchange="dropdownTip()" id="select">
    <option value="Printer List" selected="" disabled="disabled">Printers</option>
    <option value="Printer A">HP</option>
    <option value="Printer B">Zebra</option>
    <option value="Printer C">Lexmar</option>
    <option value="Printer D">Qual</option>
</select>
<div id="result"></div>

JS:

    function dropdownTip() {
    var e = document.getElementById("select");
    var value = e.options[e.selectedIndex].value;
    var text = "";
    switch (value) {
    case "Printer A":
    text = "<p>your HP text</p>";
    break;
    case "Printer B":
    text = "<p>your Zebra text</p>";
    break;
    case "Printer C":
    text = "<p>your Lexmar text</p>";
    break;
    case "Printer D":
    text = "<p>your Qual text</p>";
    break;
    }
    document.getElementById("result").innerHTML = text;
}

您应该为<select> 使用onChange选项

<select onchange="yourfunction()"></select>
相关文章：