Contexto: estoy tratando de crear un proyecto simple (un árbol de decisiones) y me gustaría saber cómo puedo crear un menú desplegable para que el usuario pueda seleccionar una opción específica y recuperar un resultado de un archivo json.
Este es el código HTML:
decisiontree.create( window.location.href.replace(/\/.*\.html$/, 'coronary.json'), document.getElementById('output'), document.getElementById('status') ); <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <title>Decision Tree</title> <script src="https://cdn.jsdelivr.net/npm/html-decision-tree/dist/decisiontree.js"></script> <link rel="stylesheet" href="../styles/tree.css"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet"> </head> <body> <div class="content"> <header> <h1> Knowledge-Based Decision Tree </h1> </header> <main class="main-content"> <div id="status"> <select id="selection"> <option value="coronary.json"> Hypertension Decision Tree </option> <option value="diabetes.json"> Diabetes Decision Tree </option> </select> </div> <div id="output"></div> </main> </div> </body> </html> Como puede ver, solo permito que el usuario acceda al archivo 'coronary.json', pero me gustaría que el usuario tenga cierta flexibilidad y seleccione entre una variedad de opciones en un menú desplegable. ¿Cómo podría hacer que el usuario seleccione una opción y luego se le pase window.location.href.replace... para usar la información de un archivo dado?
Creo que tendría que crear algún tipo de querySelector para recuperar los valores de cada opción y luego pasar estos valores a window.location.href, pero no estoy seguro de cómo podría hacerlo.
¡Gracias de antemano!
Para escuchar los eventos de cambio en su elemento select , puede observar cambios como este:
const selectElement = document.querySelector('#selection'); const initialValue = selectElement.value; console.log('initial value:', initialValue); selectElement.addEventListener('change', (event) => { const selectedValue = event.target.value; //your logic goes here console.log('selection changed:', selectedValue) }); <select id="selection"> <option value="coronary.json"> Hypertension Decision Tree </option> <option value="diabetes.json"> Diabetes Decision Tree </option> </select>Alternativamente, y este es probablemente el mejor enfoque, es posible que desee agregar un botón con un evento onclick:
function generateDecisionTree() { const selectedValue = document.querySelector('#selection').value; //your logic goes here console.log("Selected value:", selectedValue) } <select id="selection"> <option value="coronary.json"> Hypertension Decision Tree </option> <option value="diabetes.json"> Diabetes Decision Tree </option> </select> <button onclick=generateDecisionTree()>Generate decision tree</button> Si la función de biblioteca decisiontree.create toma direcciones URL, es probable que pueda darle el valor ./${selectedValue } (suponiendo que está alojando sus archivos JSON en la misma carpeta que su archivo HTML) o tal vez la URL completa (p. ej., http://localhost:8000/${selectedValue} ) y los 2 elementos DOM.
Si toma un objeto JS que contiene datos de su archivo JSON, es posible que deba usar algo como la API de búsqueda :
fetch(`./${selectedValue }`) .then(response => response.json()) .then(data => decisiontree.create(data, document.getElementById('output'), document.getElementById('status')));