0

Hola mi consulta es la siguente, tengo un select en HTML que segun el que seleccione me muestra las opciones que estan abajo, pero solo me funciona en el navegador de firefox, y no me funciona en ningun otro, y quisiera saber como lo puedo arreglar para que me resulte en los otros navegadores

            <div class="form-group">
            <label for="tpres">Tipo Reservación:</label>
            <select class="form-control" id="tpres" name="tpres" required>
                <option value="0" (click)="op1=false;op2=false;op3=false;op4=false;op5=false;">Seleccione Un Tipo De Reservación</option>
                <option value="1" (click)="op1=true;op2=false;op3=false;op4=false;op5=false;">Día Único</option>
                <option value="2" (click)="op1=false;op2=true;op3=false;op4=false;op5=false;">Día Semanal</option>
                <option value="3" (click)="op1=false;op2=false;op3=true;op4=false;op5=false;">Semanal</option>
                <option value="4" (click)="op1=false;op2=false;op3=false;op4=true;op5=false;">Anual (Proceso)</option>
                <option value="5" (click)="op1=false;op2=false;op3=false;op4=false;op5=true;">Personalizado (Proceso)</option>
            </select>
        </div>

las opciones que al seleccionar en el select de arrba deben mostrar las siguientes:

        <div *ngIf="op1"> 
            <div class="form-group">
                <div class="form-row">
                    <div class="col">
                        <label for="fecha_op1">Fecha :</label>   
                        <input type="date" class="form-control" min="{{todate | date:'yyyy-MM-dd'}}" [(ngModel)]="guardado_OP1.fecha" id="fecha_op1" name="fecha_op1">       
                    </div>
                </div>
            </div>
            <div class="form-group row" style="width:100%;;">
                <div *ngFor="let hora1 of horas">
                    <label class="col-sm-2">
                        <input class="chk_sel_h_op1 chk_all_style" type="checkbox" value="{{hora1.id}}"> {{hora1.h_inicio}} - {{hora1.h_fin}}
                    </label>
                </div>
            </div>
        </div>

        <div *ngIf="op2"> 
            <div class="form-group row">
                <div class="col-sm-1">
                    <label class="control-label" for="fecha_desde_op2">Fecha Desde :</label>
                </div>
                <div class="col-sm-2">
                    <input type="date" class="form-control" [(ngModel)]="guardado_OP2.fecha_desde" id="fecha_desde_op2" name="fecha_desde_op2">    
                </div>
                <div class="col-sm-1">
                    <label class="control-label" for="fecha_hasta_op2">Fecha Hasta :</label>
                </div>
                <div class="col-sm-2">
                    <input type="date" class="form-control" [(ngModel)]="guardado_OP2.fecha_hasta" id="fecha_hasta_op2" name="fecha_hasta_op2">
                </div>
                <div class="col-sm-3">
                    <select class="form-control" [(ngModel)]="guardado_OP2.diassemanales" id="diassemanales_op2" name="diassemanales_op2">
                        <option *ngFor="let dia of dias" selected="{{dia.selected}}" value="{{dia.id}}">{{dia.text}}</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <select class="form-control" [(ngModel)]="guardado_OP2.contadorsemanal" id="contadorsemanal_op2" name="contadorsemanal_op2" multiple>
                        <option value="1" selected>Semana 1</option>
                        <option value="2">Semana 2</option>
                        <option value="3">Semana 3</option>
                        <option value="4">Semana 4</option>
                        <option value="5">Semana 5</option>
                    </select>
                </div>
            </div>
            <div class="form-group row" style="width:100%;;">
                <div *ngFor="let hora1 of horas">
                    <label class="col-sm-2">
                        <input class="chk_sel_h_op2 chk_all_style" type="checkbox" value="{{hora1.id}}"> {{hora1.h_inicio}} - {{hora1.h_fin}}
                    </label>
                </div>
            </div>
        </div>

        <div *ngIf="op3">
            <div class="form-group">
                <div class="form-row">
                    <div class="col">
                        <label for="fechaInicio">Fecha Desde:</label>
                        <input [(ngModel)]="guardado_OP3.fecha_desde" type="date" class="form-control" id="fechaInicio" name="fechaInicio">          
                    </div>
                    <div class="col">
                        <label for="fechaFin">Fecha Hasta:</label>
                        <input [(ngModel)]="guardado_OP3.fecha_hasta" type="date" class="form-control" id="fechaFin" name="fechaFin">
                    </div>
                </div>
            </div>
            <table class="table table-bordered">
                <thead style="text-align: center;">
                    <tr class="table-primary">
                        <th>Módulos</th>
                        <th>Lunes</th>
                        <th>Martes</th>
                        <th>Miercoles</th>
                        <th>Jueves</th>
                        <th>Viernes</th>
                        <th>Sabado</th>
                        <th>Domingo</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let hora of horas">
                        <td style="text-align:center;">{{hora.h_inicio}} - {{hora.h_fin}}</td>
                        <td style="text-align:center;"><input class="chk_sel_l_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
                        <td style="text-align:center;"><input class="chk_sel_m_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
                        <td style="text-align:center;"><input class="chk_sel_x_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
                        <td style="text-align:center;"><input class="chk_sel_j_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
                        <td style="text-align:center;"><input class="chk_sel_v_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
                        <td style="text-align:center;"><input class="chk_sel_s_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
                        <td style="text-align:center;"><input class="chk_sel_d_op3 chk_all_style" type="checkbox" value="{{hora.id}}"/></td>
                    </tr>
                </tbody>
            </table>
        </div>

el tema es que en firefox lo hace todo perfecto pero los probe en otros navegadores como chrome, opera, explorer y no me funciona.

1
  • Qué tiene que ver esta pregunta con Spring Boot? Commented el 25 feb. 2021 a las 20:19

1 respuesta 1

0

Yo creo que puedes aprovechar las ventajas de angular para realizar estas acciones, yo en tu caso siguiendo tu ejemplo, lo que haría seria el siguiente proceso.

  • Genero una variable en mi ts.
  • Asigno esa variable a mi model de el select
  • En el ngModelChange de mi select, valido las opciones

ejemplo.

/* component.html*/
    //Asigno mi variable al ngModel
    //Tomo el ngModelChange, aun que puede ser el (change)
    //a el option le bindeo el ngValue, para que me respete el tipo si no lo toma como string
    <select class="form-control" id="tpres" name="tpres" [(ngModel)]="opcion"
      (ngModelChange)="actualizaVista()" required>
      <option [ngValue]="0">Seleccione Un Tipo De Reservación</option>
      <option [ngValue]="1">Día Único</option>
    </select>
  <div *ngIf="op1">
  </div>
  <div *ngIf="op2">
  </div>

/*component.ts*/

  // declaro mi valor para el select
  public  opcion: number = 0;
  public  op1: boolean = false;
  public  op2: boolean = false;

  //Aquí entra mi evento y valido que opciones deberé mostrar
  public actualizaVista() {
    switch (this.opcion) {
      case 0:
        this.op1 = false;
        this.op2 = false;
        this.op3 = false;
        this.op4 = false;
        this.op5 = false;
        break;
      case 1:
        this.op1 = true;
        this.op2 = false;
        break;
      case 2:
        this.op1 = false;
        this.op2 = true;
        break;
    }

Y validando tu lógica una manera mas sencilla de realizarlo seria, validar directamente con el option y el ngSwith.

  public   opcion2: number = 0;

  <select class="form-control" id="tpres" name="tpres" [(ngModel)]="opcion2" required>
    <option [ngValue]="0">Seleccione Un Tipo De Reservación</option>
    <option [ngValue]="1">Día Único</option>
    <option [ngValue]="2">Día Semanal</option>
  </select>
  
  <ng-container [ngSwitch]="opcion2">
    <ng-container *ngSwitchCase="1">
      <div>
      </div>
    </ng-container>
    <ng-container *ngSwitchCase="2">
      <div>
      </div>
    </ng-container>
    <ng-container *ngSwitchCase="3">
      <div>
      </div>
    </ng-container>
  </ng-container>

Te dejo una liga con los dos ejemplos que menciono. https://codesandbox.io/s/happy-kepler-k6zf5?file=/src/app/app.component.html

1
  • muchas gracias me ayudo mucho.
    – Wolf
    Commented el 25 feb. 2021 a las 23:23

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.