Objects in JavaScript using jQuery

Question

It does not show me data from the object..

HTML:

<div class="form-data">
    <select name="option">
        <option value="0"></option>
        <option value="1">Name</option>
        <option value="2">Lastname</option>
        <option value="3">Age</option>
    </select>
</div>

<div id="output"></div>

This is SELECT in HTML

JS:

var obj = {
        name: "Alex",
        lastname: "Strukov",
        age: "21"
    }

    $("select[name='option']").on("change", function() {
        var value = $("select[name='option']").val();
        switch (value) {
            case 1:
            $("div#output").text(obj["name"]);
            break;

            case 2:
            $("#output").text(obj["lastname"]);
            break;

            case 3:
            $("#output").text(obj["age"]);
            break;
        }
    });

For example: I want to select "Name", and let the object display the data

What are the values in the select? Can you create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — Ghostrydr, Apr 09 '18 at 14:58
The code looks OK! Something must probably be wrong in the HTML then — 3Dos, Apr 09 '18 at 14:58
The `value` of an `input` or `select` is always a string. `switch` uses `===`-style comparisons, so your cases will never match, as they're numbers, not strings. Either make them strings, or parse the value. — T.J. Crowder, Apr 09 '18 at 14:58
Side note: In your handler, no need to re-query the DOM, just use `var value = $(this).val();` — T.J. Crowder, Apr 09 '18 at 15:00

brk · Accepted Answer · 2018-04-09T15:04:46.543

Add onchange handler to the select & Pass the value of the selected function. In your case the object does not have a key by name 1,2,3. So $("select[name='option']").val(); will not able to retrieve any value by key from the object

var obj = {
  name: "Alex",
  lastname: "Strukov",
  age: "21"
}

function showValue(val) {
  $("#output").text(obj[val]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="showValue(this.value)">
<option value ="name">Name</option>
<option value ="lastname">lastname</option>
<option value ="age">age</option>
</select>
<div id="output"></div>

Objects in JavaScript using jQuery

1 Answers1