Estoy trabajando en una tabla que se completará en función de lo que se seleccione en un menú desplegable; sin embargo, cuando se realiza una selección, el resultado se muestra como indefinido. Estoy intentando usar el valor desplegable para hacer referencia a un objeto dentro de una función. Me pregunto si el valor del menú desplegable no se puede usar para hacer referencia a la función o si el valor debe cambiarse de alguna manera para que funcione correctamente en el script.
Soy nuevo en Javascript, gracias de antemano por cualquier consejo. A continuación se muestra un ejemplo de código de lo que estoy usando.
function fillrow() { var selection = document.getElementById("description_dropdown").value; const fordmotorco = { sector: "Corporate Bonds", cusip: "ABC5132", coupon: "5%" }; const abbvie = { sector: "Corporate Bonds", cusip: "A12345HJ", coupon: "3%" }; document.getElementById("col0").innerHTML = selection.sector; document.getElementById("col1").innerHTML = selection.cusip; document.getElementById("col2").innerHTML = selection.coupon; } <table id="holdings"> <thead> <th>Sector</th> <th>Cusip</th> <th>Coupon</th> </thead> <tr id=select_security_row> <td id="col0">-</td> <td id="col1">-</td> <td id="col2">-</td> <td id="col3"> <select id="description_dropdown" type=text name=Cusip onchange="fillrow(this)"> <option value="fordmotorco">Ford Motor Co</option> <option value="abbvie">Abbvie</option> </select> </td> </tr> </table>Aquí está mi solución:
let data = { "fordmotorco": { sector: "Corporate Bonds", cusip: "ABC5132", coupon: "5%" }, "abbvie": { sector: "Corporate Bonds", cusip: "A12345HJ", coupon: "3%" } }; function fillrow(selectBox) { let selection = selectBox.value; document.getElementById("col0").innerHTML = data[selection].sector; document.getElementById("col1").innerHTML = data[selection].cusip; document.getElementById("col2").innerHTML = data[selection].coupon; } <table id="holdings"> <thead> <th>Sector</th> <th>Cusip</th> <th>Coupon</th> </thead> <tr id=select_security_row> <td id="col0">-</td> <td id="col1">-</td> <td id="col2">-</td> <td id="col3"><select id="description_dropdown" type=text name=Cusip onchange="fillrow(this)"> <option value="fordmotorco">Ford Motor Co</option> <option value="abbvie">Abbvie</option> </select></td> </tr> </table>El valor cuando realiza la selección no cambiará. Un mejor enfoque es adjuntar un detector de eventos de change a su <select> . Ver documentos addEventListener , cambiar evento. Entonces, cada vez que elija una opción en el menú desplegable, se llamará a la función de devolución de llamada pasada en addEventListener .
Aquí está el cambio sugerido a su código JS:
function fillrow(value) { const data = { fordmotorco: { sector: 'Corporate Bonds', cusip: 'ABC5132', coupon: '5%', }, abbvie: { sector: 'Corporate Bonds', cusip: 'A12345HJ', coupon: '3%' }, } document.getElementById('col0').innerHTML = data[value].sector document.getElementById('col1').innerHTML = data[value].cusip document.getElementById('col2').innerHTML = data[value].coupon } document .getElementById('description_dropdown') .addEventListener('change', function (event) { fillrow(event.target.value) })Adjunto una demostración de trabajo para un ejemplo similar también.