CODEWITHSUNDEEP
javascriptselect
Matthew Bailey
Matthew Bailey

Reputation: 5

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

Here is my quandary:

I am looking to create a drop down menu that displays a listing of information when selected.

My coding thus far:

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

Basically what I'm looking to do is:

  1. User selects an option value

  2. Upon selection of an option value I would have a predefined dataset/list (see below) to appear below the dropdown itself.

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

  3. Once the user selects a different option value then the dataset associated with each new option replaces the previous.

Does anyone have any idea how I could do this somewhat simply?

Upvotes: 0

Views: 84

Answers (3)

JRulle
JRulle

Reputation: 7568

Try this (using a switch statement to set the details)

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

Upvotes: 0

user3591579
user3591579

Reputation: 11

You can create your predefined dataset in form of JSON object and save your data. And use the key of object as same as your option value.

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

This is the simplest way to show the result from predefined dataset.

Upvotes: 1

monkeyinsight
monkeyinsight

Reputation: 4859

You should use onChange option for <select>

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

Upvotes: 0

Related Questions