Quiero hacer un bucle de identificación de los elementos de selección/opción y almacenar el texto de las opciones seleccionadas en una matriz que no funciona de esta manera:
function jsGetSelectedOptionText(optionID) { var otext = []; var oid; optionID.forEach(function(id,i) { oid = d3.select('#' + id).node(); var t = oid.options[oid.selectedIndex].text; console.log(typeof(t), t); otext.push(t); }); console.log(otext); return(otext); }Puedo ver el tipo (cadena) y el texto impreso por console.log, pero otext permanece vacío. ¿Qué pasa aquí?
Puede seleccionar la opción directamente con un selector y leer el contenido de texto del elemento.
const id = 's1'; console.log(d3.select('#' + id + ' option:checked').node().textContent); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js" integrity="sha512-NMhzM2RHzbCRO0s5VPaRC+2bW6nmNXimzC9p5sp2x19M+zzuSJ2T50dEQ7hpHkNjnX1mt8nQg1NNthwRZgsoIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <select class="foo" id="s1"> <option>Hello 1-1 </option> <option selected>Hello 1-2</option> </select>Si todas sus selecciones tienen una clase común, solo puede usar un selector
const allSelectedText = Array.from(d3.selectAll('select.foo option:checked')).map(opt => opt.textContent); console.log(allSelectedText); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js" integrity="sha512-NMhzM2RHzbCRO0s5VPaRC+2bW6nmNXimzC9p5sp2x19M+zzuSJ2T50dEQ7hpHkNjnX1mt8nQg1NNthwRZgsoIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <select class="foo"> <option>Hello 1-1 </option> <option selected>Hello 1-2</option> </select> <select class="foo"> <option>Hello 2-1</option> <option>Hello 2-2</option> </select> <select class="foo"> <option>Hello 3-1</option> <option>Hello 3-1</option> </select>