javascript - 将列表显示为 <选项值 ="">

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>

基本上我想做的是:

1. 用户选择选项值
   

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

   Printer Name: GRHPCOLOR1
   IP Address: xxx.xxx.xxx.xxx
   Paper types: LaserJet only
   Service Call: 1(800)XXX-XXXX

3. 一旦用户选择了不同的选项值，与每个新选项关联的数据集就会取代之前的数据集。

有人知道我可以如何简单地做到这一点吗？

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>

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