0
312
ViewsEstablezca 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 answers
Answer question0
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
Report
Answer question