...
HTML |
---|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <style> option:disabled { opacity: 0.4; } </style> <script> $(document).ready(function(){ var plotsBaseURL='https://confluence.ecmwf.int/download/attachments/3737537919373753799/' var periods = [{key:'1940-2022', label:'1940-2022'}, {key:'1970-2022', label:'1970-2022'}] // populate selects var populate = function(vals,id,available){ $.each(vals, function(){ $('<option/>', {'value': this.key,'text': this.label}).appendTo('#'+id); }); } populate(periods,'sel_period'); // populate months function getMonthName(monthNumber) { const date = new Date(2001, monthNumber - 1, 1); return date.toLocaleString('en-GB', { month: 'long' }); } for (var i = 1; i < 13; i++) { $('<option />', {'value': i,'text': getMonthName(i) }).appendTo('#sel_month'); } //update functions var updateImage = function(){ var period = $('#sel_period').val(); var month = $('#sel_month').val(); var str_month = String(month).padStart(2, '0'); imgfname=period+'_t2m_ENSOneg_tsum_month'+str_month+'.png'; $('#t2m_nina').attr('src',plotsBaseURL+imgfname); imgfname=period+'_t2m_ENSOpos_tsum_month'+str_month+'.png'; $('#t2m_nino').attr('src',plotsBaseURL+imgfname); imgfname=period+'_tp_ENSOneg_tsum_month'+str_month+'.png'; $('#prec_nina').attr('src',plotsBaseURL+imgfname); imgfname=period+'_tp_ENSOpos_tsum_month'+str_month+'.png'; $('#prec_nino').attr('src',plotsBaseURL+imgfname); } updateImage(); $('#selectors select').on('change',function(e){ updateImage(); }) }) </script> <div id="selectors"> <label for="sel_month">Month: </label><select id="sel_month" ></select> <label for="sel_period">Reference period: </label><select id="sel_period"></select> <br> </div> <img id="t2m_nina" width="50%"/><img id="t2m_nino" width="50%"/><br/> <img id="prec_nina" width="50%"/><img id="prec_nino" width="50%"/><br/> |
...