Question

我正在尝试使用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>

我的js代码：

    function myFunction() {
    var x = document.getElementById("c1").value;
    var y = document.getElementById("c2").value;
    document.getElementById("result").innerText = typeof(x);

}
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"}
};
console.log(typeof(countryData.Germany))

以下是整个事情：https://jsfiddle.net/foha1p7w/

我希望展示两个国家和地区的并置。属性。我能在这做什么？感谢

Answer 1

由于您还没有显示出您想要比较的方式，因此一种非常粗略的比较方法就是像这样并排显示价值

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>

小提琴 - https://jsfiddle.net/vabii/93wqmkh3/

Answer 2

您的问题有点模糊 - 我不确定您希望如何显示此数据，但这可能是您可以做的最简单的事情：https://jsfiddle.net/ax2818ya/。我只是用字符串插值来做一个句子。

这是主要功能：

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

请注意，我必须更改＆＃34;比较＆＃34;的值。匹配对象中的键名称。忽略我把所有东西都放在窗口上的事实，我对JSFiddle不好。小心并考虑如果其中一个字段留空并且用户单击提交会发生什么。作为一般提示，在命名变量时尽可能尝试描述 - 不要只使用x和y。

使用javascript

2 个答案: