JSONデータが入力されたドロップダウンリストから選択の詳細を取得するにはどうすればよいですか？

私は、次のtest.json持っている：私の質問はどのように、あるJSONデータが入力されたドロップダウンリストから選択の詳細を取得するにはどうすればよいですか？

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

：

{"countries":[{"countryCode":"US","officialName":"UNITED STATES OF AMERICA","continent":"NORTH AMERICA","currentSeason":"WINTER"},{"countryCode":"AR","officialName":"ARGENTINA","continent":"SOUTH AMERICA","currentSeason":"SUMMER"}]}

そして、次のHTML/jQueryのJSONデータからofficialName値とドロップダウンを移入選択した国に基づいて他の従属データ（currentSeason、countryCode、大陸など）にアクセスし、そのデータでdetailsBoxテキストエリアを記入できますか？

ありがとうございます。

出典

2017-02-10 ITWorker

var translations = { 
 
    "countries": [{ 
 
    "countryCode": "US", 
 
    "officialName": "UNITED STATES OF AMERICA", 
 
    "continent": "NORTH AMERICA", 
 
    "currentSeason": "WINTER" 
 
    }, { 
 
    "countryCode": "AR", 
 
    "officialName": "ARGENTINA", 
 
    "continent": "SOUTH AMERICA", 
 
    "currentSeason": "SUMMER" 
 
    }] 
 
} 
 

 
var $select = $('#countries') 
 
$.each(translations.countries, function(key, val) { 
 
    $select.append('<option id="' + val.countryCode + '">' + val.officialName + '</option>'); 
 
}) 
 

 
$select.change(function() { 
 
    var countrycode = $("option:selected",this).attr('id'); 
 

 
    $.each(translations.countries, function(key, val) { 
 
    console.log(val.countryCode) 
 
    console.log(countrycode) 
 
    if(val.countryCode == countrycode) 
 
    $("#detailsbox").text("season is " +val.currentSeason) 
 
    }) 
 

 

 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select id="countries"></select> 
 
    <br> 
 
    <textarea id="detailsbox" rows="4" cols="50"> 
 
    </textarea> 
 
</div>

利用の変化イベント
代替方法のための選択

出典

2017-02-10 04:08:26 guradio

ありがとうございました – ITWorker

@ITWorkerがうれしいコーディングを手伝ってうれしいです:) – guradio

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

出典

2017-02-10 04:07:31 dana

感謝の負荷火災変更イベントに。 – ITWorker

問題ありません！実際に私が気づいたことの1つは、サーバーにポストバックされない（そして私の解決策も破られる） ''属性を設定していたということです。 '

更新いただきありがとうございます！シンプルなGETからJSONデータを解析する方法を練習しているだけなので、サーバーに何かを投稿することは私の意図ではありませんでしたが、これは将来的には便利になります。 – ITWorker

JSONデータが入力されたドロップダウンリストから選択の詳細を取得するにはどうすればよいですか？

答えて

関連する問題