Tengo una selección de HTML simple, cuando el usuario ingresa los datos en el cuadro de texto si los datos ingresados son inferiores a un porcentaje, se muestra esta selección de HTML; de lo contrario, está oculta. Quiero agregarle búsqueda. Probé Select2, pero no pude implementarlo correctamente. Necesito ayuda El código es el siguiente
<select name="reason" id="reason#getProdInfo.currentRow#" style="display: none"> <option>--</option> <option>Line feeding not available</option> <option>WIP not available</option> <option>Absenteeism issue</option> <option>Operator on other operation issue</option> <option>Reworking due to high DHU</option> <option>Re-check</option> <option>Operator training issue</option> <option>Machine out of order</option> <option>Operator low efficiency</option> <option>Trolley not available</option> <option>Line feeding late arrived</option> <option>Operator working on extra work</option> <option>Operator late arrived</option> <option>Engineering Support not available </option> </select>El JS:
$('#prods1').on('focusout', function(){ var element1 = document.getElementById("prods1").value; var element2 = document.getElementById("trgt").value; var calc = (element1/element2)*100 if (calc<70){ $("#reason1").show() }else{ $("#reason1").hide() } });Alguien, por favor, corríjame si me equivoco aquí, pero tal vez usar un ternario para representar condicionalmente la selección sería la solución más fácil y simple para decidir si el elemento HTML se representa.
{userInput.length > 0 ? <select name="reason" id="reason#getProdInfo.currentRow#" style="display: block"> : <select name="reason" id="reason#getProdInfo.currentRow#" style="display: none"> }