Question

这是我的困惑：

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

到目前为止我的编码：

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

基本上我要做的是：

用户选择选项值
选择一个选项值后，我会在下拉列表下方显示一个预定义的数据集/列表（见下面）。


打印机名称：GRHPCOLOR1
  IP地址：xxx.xxx.xxx.xxx
  纸张类型：仅限LaserJet   服务电话：1（800）XXX-XXXX
一旦用户选择了不同的选项值，则与每个新选项关联的数据集将替换之前的选项。

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

Answer 1

您可以以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>

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

Answer 2

您应该使用onChange

的<select>选项

<select onchange="yourfunction()"></select>

Answer 3

尝试此操作（使用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;
}

将列表显示为<option value =“”> </option>

3 个答案: