如何根据我的下拉菜单打印出我的对象属性

How can print out my object properties base on my dropdown-menu?

本文关键字：我的 对象 属性 打印 下拉菜单 何根      更新时间：2023-09-26

我有一个带有选项的下拉菜单：A，B。我有 2 个对象：A、B。

他们的财产是 

var A = { name:"Andrew", age:26, country:"United States" };
var B = { name:"Barry", age:23, country:"Italy" };

当从下拉菜单中选择 A 时，我想显示 A 信息，反之亦然。

<!DOCTYPE html>
<html>
<head>
  <title>JSON</title>
</head>
<body>
  <form>
    Student :
    <select id="dd" onchange="myStudent()">
      <option value="A">A</option>
      <option value="B">B</option>
    </select>
    <p>Selected Student :
      <input type="text" id="student" size="2" value="A">
    </p>
  </form>
  <div id="result">Details :
    <br>
  </div>
</body>
<script type="text/javascript">
  function myStudent() {
    var dd = document.getElementById("dd");
    var selected = dd.options[dd.selectedIndex].text;
    document.getElementById("student").value = selected;
  }
  var A = {
    name: "Andrew",
    age: 26,
    country: "United States"
  };
  var B = {
    name: "Barry",
    age: 23,
    country: "Italy"
  };
  var result = document.getElementById("result");
  result.innerHTML += JSON.stringify(A, undefined, 6);
</script>
</html>

我无法显示。有人可以给我一些提示吗？

这是我的JSFiddle

您从未在 myStudent（） 调用中更改过文档 HTML。

首先，我将定义 selections、selections["A"] 和 selections["B"] 的代码移到 myStudent（） 函数之前，这样它就不会是未定义的。

我将A和B移动到 selections 对象中，以避免在将选择传递到 JSON.stringify 函数时出现一些令人讨厌的eval。否则，为了将对象传递到 JSON.stringify 函数中，我需要做一些类似 JSON.stringify(eval(selected), undefined, 6); 的事情，这是丑陋的，只是不好的做法。

然后，我输入代码以查找在myStudent函数中选择了哪一个。

我仍然不确定参数 undefined 和 6 在 JSON.stringify 中的用途是什么.希望比我更光明的人能够发表评论。

代码应该有效。

<!DOCTYPE html>
<html>
<head>
  <title>JSON</title>
</head>
<body>
  <form>
    Student :
    <select id="dd" onchange="myStudent()">
      <option value="A">A</option>
      <option value="B">B</option>
    </select>
    <p>Selected Student :
      <input type="text" id="student" size="2" value="A">
    </p>
  </form>
  <div id="result">Details :
    <br>
  </div>
</body>
<script type="text/javascript">
  var selections = {};
  selections["A"] = {
    name: "Andrew",
    age: 26,
    country: "United States"
  };
  selections["B"] = {
    name: "Barry",
    age: 23,
    country: "Italy"
  };
function myStudent() {
    var dd = document.getElementById("dd");
    var selected = dd.options[dd.selectedIndex].text;
    document.getElementById("student").value = selected;
    
    var result = document.getElementById("result");
    result.innerHTML = JSON.stringify(selections[selected], undefined, 6);
  }
  var result = document.getElementById("result");
  result.innerHTML = JSON.stringify(selections["A"], undefined, 6);
</script>
</html>

应该是：

var dd = document.getElementById("dd");
var selected = dd.options[dd.selectedIndex].text;

在声明变量之前，您正在使用该变量。

相关文章：