Obtengo el valor de un input para hacer aparecer y desaparecer un div según la opción que se elija. aquí la idea es que al seleccionar cualquiera de las opciones a excepción de la primera el div #precio se desaparezca.
$('#pago').focusout(function() {
var x = $(this).val();
var metod_pay = ['Credit Card','Debit Card','Paypal','Wire Transfer'];
metod_pay.forEach(pay => {
if( x == pay ){
$("#precio").css("display", "none");
}
else{
$("#precio").css("display", "block");
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3">
<input class="custom-select col-12" id="pago" name="pay_mode" placeholder="--Select Pay Mode--" list="browsersss" autocomplete="off" required="required">
<datalist id="browsersss">
<option value="Efectivo">Efectivo</option>
<option value="Credit Card">Credit Card</option>
<option value="Debit Card">Debit Card</option>
<option value="Wire Transfer">Wire Transfer</option>
<option value="Paypal">Paypal</option> </datalist>
</div>
<div id="precio"> <input type="text"> </div>
pero solo está seleccionando el último objeto 'Wire Transfer' si selecciono 'paypal', el div debería seguir oculto pero no es el caso.
if(x[pay] == pay)...
foreach
sigue ejecutandose, y siempre acabará con unblock
, exceptuando en el caso del último elemento del array. Es decir, si seleccionoCredit card
, la primera vez hara unnone
pero luego volerá a ponerseblock