0
313
VistasEstablezca etiquetas de grupos de botones de radio dinámicamente en función de los valores seleccionados en las listas desplegables
Tengo un formulario html con 4 elementos de formulario: 3 listas desplegables y un grupo de botones de opción.
Quiero que la etiqueta de los botones de radio se establezca dinámicamente en función de los valores seleccionados en las listas desplegables.
Por ejemplo, los valores seleccionados en las listas desplegables son q-tip, hold y h1 respectivamente. Entonces, las etiquetas en el grupo de botones de radio (Dirección) deben ser:
- Primer botón de radio - q-tip mantenga presionado h1.
- Segundo botón de radio - h1 mantener q-tip
Este es el enlace jsfiddle: http://jsfiddle.net/coderr/yznf1qk3/22/
<div style="float:left;"> <h5>Object</h5> <select name="object" id="object"> <option value="q-tip">q-tip</option> <option value="o2">o2</option> </select> </div> <div style="float:left;"> <h5>Action</h5> <select name="action" id="action"> <option value="hold">hold</option> <option value="a2">a2</option> </select> </div> <div style="float:left;"> <h5>Person</h5> <select name="humann" id="human"> <option value="h1">h1</option> <option value="h2">h2</option> </select> </div> <fieldset> <legend>Direction</legend> <input type="radio" name="direction" value="towards">q-tip hold h1<br> <input type="radio" name="direction" value="away">h1 hold q-tip<br> </fieldset>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Necesita agregar algo de HTML para que sea más fácil acceder al texto
$("#selects").on("change",function() { // any change of selects const dirs = $(this).find("select").map(function() { return this.value }).get(); // get the values in an array const $rads = $("[name=direction]"); // the radios $rads.eq(0).next().text(dirs.join(" ")); // update the span after the radio - I wrapped in label too dirs.reverse(); // reverse the array $rads.eq(1).next().text(dirs.join(" ")); // add to the second radio span }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="selects"> <div style="float:left;"> <h5>Object</h5> <select name="object" id="object"> <option value="q-tip">q-tip</option> <option value="o2">o2</option> </select> </div> <div style="float:left;"> <h5>Action</h5> <select name="action" id="action"> <option value="hold">hold</option> <option value="a2">a2</option> </select> </div> <div style="float:left;"> <h5>Person</h5> <select name="humann" id="human"> <option value="h1">h1</option> <option value="h2">h2</option> </select> </div> </div> <fieldset> <legend>Direction</legend> <label><input type="radio" name="direction" value="towards"><span>q-tip hold h1</span></label><br> <label><input type="radio" name="direction" value="away"><span>h1 hold q-tip</span></label><br> </fieldset>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta