使用 jQuery 的 JavaScript 中的对象 [重复]答案

【问题标题】：Objects in JavaScript using jQuery [duplicate]使用 jQuery 的 JavaScript 中的对象 [重复]
【发布时间】：2018-04-10 05:00:35
【问题描述】：

它没有显示来自对象的数据..

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>

这是 HTML 中的 SELECT

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

例如：我想选择“名称”，让对象显示数据

【问题讨论】：

嗨！向我们展示您来自 <select> 的 HTML 代码以帮助我们；）
选择中的值是什么？你能创建一个Minimal, Complete, and Verifiable example
代码看起来不错！那么 HTML 中可能有问题
value 的 input 或 select 始终是一个字符串。 switch 使用 === 风格的比较，所以你的案例永远不会匹配，因为它们是数字，而不是字符串。要么将它们设为字符串，要么解析值。
val() 返回一个字符串，所以它需要是case "1":等

标签： javascript jquery

【解决方案1】：

将 onchange 处理程序添加到 select 并传递所选函数的值。在您的情况下，该对象没有名称为 1、2、3 的键。所以$("select[name='option']").val(); 将无法从对象中通过键检索任何值

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>

【讨论】：

有效！谢谢