Estoy tratando de filtrar valores de un conjunto de datos y hacer que se refleje en una página, usando JavaScript, pero estoy luchando por obtener la solución.

Lo necesito para que cuando seleccione uno de los valores en el filtro de selección, la narración también se actualice según el valor correcto (la tercera columna) en los datos.

Creo que tengo problemas en parte debido a la forma en que estos datos se estructurarán en estas matrices (consulte countryData en el JS. Aunque, de manera óptima, así es como creo que me viene cuando los extraigo de mi fuente de datos ... Preferiré para mantenerlo así a menos que alguien vea las principales banderas rojas.

¡Puntos adicionales si puede proporcionar soluciones separadas usando Vanilla JS y jquery!

HTML

 <div class="tab-pane fade show active" id="mapTab"> <div class="sidebar"> <div class="select"> <select id="countrySelector" class="form-select selectpicker" data-width="100%" data-size="8" name="country" data-dropdown> <option value="">Country</option> <option id="all" value="All">All</option> <option id="afg" value="Afghanistan">Afghanistan</option> <option value="Bangladesh">Bangladesh</option> <option value="Bhutan">Bhutan</option> </select> </div> </div> </div> <div id="narrative"></div> </div>

JavaScript

 <script> const countryData = new Array([ ["AFG", "Afghanistan", "Test narrative about Afghanistan"], ["BGD", "Bangladesh", "Test narrative about Bangladesh"], ["BTN", "Bhutan", "Test narrative about Bhutan"], ["IND", "India", "Test narrative about India"] ] ) // Trying with vanilla JS const items = document.getElementById('countrySelector') let clickedItem = '' items.addEventListener('change', function (item) { console.log('You selected: ', this.value); displayNarrative(this.value) }); function displayNarrative(countryKey) { document.getElementById("narrative").innerHTML = countryData.filter(function (countryRef) { return countryRef == countryKey; }) } // Trying with Jquery $(document).ready(function () { var narrative = $('.narrative'); $('select#countrySelector').change(function () { narrative.columns(2).search($(this).val()).draw(); }); }) </script>