Javascript 如何从用JSON数据填充的下拉列表中获取选择的详细信息？_Javascript_Jquery_Html_Json

Javascript 如何从用JSON数据填充的下拉列表中获取选择的详细信息？

javascript jquery html json

Javascript 如何从用JSON数据填充的下拉列表中获取选择的详细信息？,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我有以下test.json：下面的html/jQuery使用JSON数据中的officialName值填充下拉列表： <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <script src="jquery.js"></script> &l

我有以下test.json：

下面的html/jQuery使用JSON数据中的officialName值填充下拉列表：

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <script src="jquery.js"></script>
</head>
<body>
    <div>
       <select id="countries"></select>
       <br>
       <textarea id="detailsbox" rows="4" cols="50">
       </textarea>
    </div>
</body>
<script type="text/JavaScript">
    $(document).ready(function() {
        var $select = $('#countries')
        $.getJSON('test.json',function(translations){
        $select.html('');
        //iterate over the data and append a select option
        $.each(translations.countries, function(key, val){ 
        $select.append('<option id="' + val.countryCode + '">' + val.officialName + '</option>');
       })
    });
    });
</script>
</html>

我的问题是，如何根据所选国家访问其他相关数据，如currentSeason、countryCode、Continument，并用这些数据填写detailsBox文本区域

谢谢。

选择一个国家后，使用Array.filter快速查找所选国家

var $select = $('#countries');

// setting <option value="..."> as opposed to <option id="...">
$.each(translations.countries, function(key, val) {
    $select.append('<option value="' + val.countryCode + '">' + val.officialName + '</option>');
});

$select.change(function() {
    var code = $(this).val();
    var country = translations.countries.filter(function(value) {
        return value.countryCode == code;
    })[0];
    console.log(country);
});

变量转换={ 国家：[{ 国家代码：美国，官方名称：美利坚合众国，大陆：北美，当前季节：冬季 }, { 国家代码：AR，官方名称：阿根廷，大陆：南美洲，当前季节：夏季 }] } var$select=$‘国家’ $.eachtranslations.countries，functionkey，val{ $select.append+val.officialName+； } $select.changefunction{ var countrycode=$option:selected，this.attr'id'； $.eachtranslations.countries，functionkey，val{ console.logval.countryCode console.logcountrycode ifval.countryCode==countryCode $detailsbox.textseason为+val.currentSeason } }.改变；

谢谢你的替代方法。没问题！事后我注意到的一件事是，您设置了一个属性，该属性不会返回到服务器，也会破坏我的解决方案。我更新了要设置的内容，这些内容将发布回服务器，并修复了我的解决方案。感谢更新！我不打算将任何内容发回服务器，因为我只是在练习如何从simple GETs解析JSON数据，但这将在将来派上用场。@ITWorker很高兴帮助mate happy编码：

var $select = $('#countries');

// setting <option value="..."> as opposed to <option id="...">
$.each(translations.countries, function(key, val) {
    $select.append('<option value="' + val.countryCode + '">' + val.officialName + '</option>');
});

$select.change(function() {
    var code = $(this).val();
    var country = translations.countries.filter(function(value) {
        return value.countryCode == code;
    })[0];
    console.log(country);
});