0

El problema que tengo es que estoy haciendo un formulario y hay un select el cual es para seleccionar un plan y quisiera que a la derecha del todo se mostrara el precio del plan para que quede mas organizado. He intentado con span modificandolo desde el css y otras cosas con javascript pero se me ha hecho imposible. Alguna ayuda o idea no me vendría mal

<select name="tipoPlan" id="tipoPlan" class="form-select">
  <option value="" disabled selected>Selecciona el tipo de plan</option>
  <option value="individual">Individual CLINIGOLD 50$</option>
  <option value="individual">Individual ESMERALDA 125$</option>
  <option value="familiar">Familiar CLINISEGURO 500$</option>
</select>

3
  • Quieres que fuera del select en un span se muestre el precio??? Por otro lado, estás repitiendo los value, me parece que en tu caso deberían ser únicos
    – Yussef
    Commented el 6 ene. a las 7:22
  • Nono, no quiero que se vuelva a repetir el precio, lo que quiero es que el precio que hay dentro del option se alinee a la derecha del option, no que se repita o se coloque de nuevo
    – Daniel Paz
    Commented el 8 ene. a las 0:18
  • Truco "feo" pero funcional: si agregás como CSS direction: rtl; (rigth to left) a option, ¿luce como esperás?
    – padaleiana
    Commented el 8 ene. a las 13:25

1 respuesta 1

0

Con un addEventListener puedes registrar el evento "change", con este puedes obtener el valor de tu select y dependiendo del valor puedes mostrarlo dentro de un div o cualquier otro elemento que quieras.

    <div style="display: flex;">
    <select name="tipoPlan" id="tipoPlan" class="form-select">
        <option value="" disabled selected>Selecciona el tipo de plan</option>
        <option value="Individual-CLINIGOLD">Individual CLINIGOLD 50$</option>
        <option value="Individual-ESMERALDA">Individual ESMERALDA 125$</option>
        <option value="Familiar-CLINISEGURO">Familiar CLINISEGURO 500$</option>
    </select>
    <div id="price"></div>

</div>


  <script>
    const priceDiv=document.getElementById("price")
    document.getElementById('tipoPlan').addEventListener("change",(event)=>{
        if(event.target.value=="Individual-CLINIGOLD"){
            console.log(50)
            priceDiv.innerText="50";
        }
        if(event.target.value=="Individual-ESMERALDA"){
            console.log(125)
            priceDiv.innerText="125";
        }
        if(event.target.value=="Familiar-CLINISEGURO"){
            console.log(500)
            priceDiv.innerText="500";
        }
    })
  </script>

También puedes poner el precio dentro del value de cada option

  <div style="display: flex;">
    <select name="tipoPlan" id="tipoPlan" class="form-select">
        <option value="" disabled selected>Selecciona el tipo de plan</option>
        <option value="50">Individual CLINIGOLD 50$</option>
        <option value="125">Individual ESMERALDA 125$</option>
        <option value="500">Familiar CLINISEGURO 500$</option>
      </select>
      <div id="price"></div>
  </div>

  <script>
    document.getElementById("tipoPlan").addEventListener("change",e=>{
        console.log(e.target.value)
        document.getElementById("price").innerText=e.target.value;
    })
  </script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.