Fatal编程技术网
  • javascript/
  • 使用javascript根据下拉菜单选项从字典中检索数据

使用javascript根据下拉菜单选项从字典中检索数据

javascript

使用javascript根据下拉菜单选项从字典中检索数据,javascript,Javascript,我试图使用javascript从下拉菜单中显示一些基于客户端选择的数据。数据在字典里。我如何检索并呈现它？这是到目前为止我的代码。 HTML文件： <head> <script type="text/javascript" src="model.js"></script> </head> <body> <form id="countryProperties"> <h4>1. Select two

我试图使用javascript从下拉菜单中显示一些基于客户端选择的数据。数据在字典里。我如何检索并呈现它？这是到目前为止我的代码。 HTML文件：

<head>
    <script type="text/javascript" src="model.js"></script>
</head>

<body>
<form id="countryProperties">
    <h4>1. Select two countries for comparison: <br><br>
        <select class="round" id="c1" name="Select1" >
            <option value="hide">--Select the first country to compare--</option>
            <option value="Germany">Germany</option>
            <option value="Norway">Norway</option>
            <option value="Greece">Greece</option>
            <option value="Poland">Poland</option>
            <option value="Denmark">Denmark</option>
        </select>

        <select class="round" id="c2" name="Select2" onclick >
            <option value="hide">--Select the second country to compare--</option>
            <option value="Germany">Germany</option>
            <option value="Norway">Norway</option>
            <option value="Greece">Greece</option>
            <option value="Poland">Poland</option>
            <option value="Denmark">Denmark</option>
        </select>
    </h4>
    <h4>2. Select category for comparison:</h4>
    <select name="categoryDropdown">
        <option value="hide">--Select the category to compare--</option>
        <option value="Population">Population</option>
        <option value="Area">Area</option>
    </select>
</form>
<br>
<button type="button" onclick="myFunction()">Submit</button>
<p id="result"></p>


<!-- Add main JS file. -->
<script src="model.js"></script>
</body>
</html>
事情是这样的：

我想展示两国财产的并置情况。我能在这里做什么？谢谢

因为您还没有展示您想要如何进行比较，比较的一种非常粗糙的方法就是像这样并排显示值

var countryData = {
    "Germany": {name: "Germany", area: "357,022 sq km", popul: "80,722,792"},
    "Norway": {name: "Norway", area: "323,802 sq km", popul: "5,265,158"},
    "Greece": {name: "Greece", area: "43,094 sq km", popul: "5,593,785"},
    "Poland": {name: "Poland", area: "312,685 sq km", popul: "38,523,261"},
    "Denmark": {name: "Denmark", area: "43,094 sq km", popul: "5,593,785"}
};

myFunction = function() {
    var x = document.getElementById("c1").value;
    var y = document.getElementById("c2").value;
    var c = document.getElementById("c3").value;

    document.getElementById("result").innerText = x + ' = ' + countryData[x][c] + ' and ' + y + ' = ' + countryData[y][c];

}

<select id="c3" name="categoryDropdown">
        <option value="hide">--Select the category to compare--</option>
        <option value="popul">Population</option>
        <option value="area">Area</option>
    </select>
像这样更改比较下拉列表

var countryData = {
    "Germany": {name: "Germany", area: "357,022 sq km", popul: "80,722,792"},
    "Norway": {name: "Norway", area: "323,802 sq km", popul: "5,265,158"},
    "Greece": {name: "Greece", area: "43,094 sq km", popul: "5,593,785"},
    "Poland": {name: "Poland", area: "312,685 sq km", popul: "38,523,261"},
    "Denmark": {name: "Denmark", area: "43,094 sq km", popul: "5,593,785"}
};

myFunction = function() {
    var x = document.getElementById("c1").value;
    var y = document.getElementById("c2").value;
    var c = document.getElementById("c3").value;

    document.getElementById("result").innerText = x + ' = ' + countryData[x][c] + ' and ' + y + ' = ' + countryData[y][c];

}

<select id="c3" name="categoryDropdown">
        <option value="hide">--Select the category to compare--</option>
        <option value="popul">Population</option>
        <option value="area">Area</option>
    </select>


--选择要比较的类别--
人口
地区
Fiddle-

您的问题有点含糊不清-我不确定您希望如何显示这些数据，但这里可能是您可以做的最简单的事情：。我只是用字符串插值来造句

以下是主要功能：

  function myFunction() {    
    var countryOne = document.getElementById("c1").value;
    var countryTwo = document.getElementById("c2").value;
    var comparison = document.getElementById("comparison").value;
    if (comparison === "Area") {
      comparison = "area"
    } else if (comparison === "Population") {
      comparison = "popul"
    }
    const output = `${countryOne} has ${comparison} ${countryData[countryOne][comparison]} and ${countryTwo} has ${comparison} ${countryData[countryTwo][comparison]}`
    document.getElementById("result").innerText = output;
}
请注意，我必须更改“comparison”的值以匹配对象中的键名称。忽略我把所有东西都放在窗口的事实，我只是不擅长JSFIDLE。请注意，如果这些字段中的一个空格，用户单击提交，将会发生什么。作为一般提示，在命名变量时，尽量做到描述性-不要只使用
x
和
y

JSFIDLE与您在此处编写的代码不同。@DouglasTylerGordon我的错。那是一份旧草稿。这个链接现在应该可以工作了。我并没有看到有人试图编写真正实现“并置”的代码。有无数种方法可以比较它们；依次显示数值；在网格中显示它们；显示说明差异的图表。您不能在文件末尾包含
model.js
，因为您的
按钮
元素需要了解
myFunction（）
：非常感谢。我只是不知道如何访问countryData。我真蠢，谢谢。现在我有了一个更好的主意。