2

Estoy creando una función que muestre horas médicas dentro de un Dropdownlist. Debo mostrar todas las horas pero marcar como "Tachadas" y Deshabilitadas las horas que ya están ocupadas de manera que la persona no pueda seleccionarlas; esta lógica la aplique en la BD ya que traigo todas las horas y las que están ocupadas tienen un "Semaforo" que marca que dichas hora están ocupadas pero no sé cómo hacer que esas horas que están ocupadas me salgan tachadas y deshabilitadas en el Dropdownlist.

En la siguiente imagen muestro todas las horas pero deberían salir las que están ocupadas como tachadas y deshabilitadas para no ser seleccionadas.

introducir la descripción de la imagen aquí

De esta manera lleno el dropdownlist con mis datos traídos desde la BD:

 $.ajax({
    url: "/metodoDeEjemplo/metodoDeEjemplo",
    data: { parametrodeEjmeplo: parametrodeEjmeplo},
    
    dataType: "json",
    type: "POST",
    timeout: 10000,
    async: false,
    success: function (data) {
        if (data != null) {

            let variabledeEjemplo = $('#inputdeEjemplo').data('kendoDropDownList');
            variabledeEjemplo.dataSource.read();
          
        }
    }
});
1
  • 1
    Imagino que el select lo debes armar con los datos que vienen de la peticion, lo mas seguro a traves de un map(), pues entonces cuando armes los option debes poner a true o false la opcion disable de acuerdo a si quieres que se pueda seleccionar o no Commented el 22 mar. 2022 a las 20:48

2 respuestas 2

0

Aunque no es con Jquery (no domino mucho jquery) te muestro un ejemplo que tal vez te sirva:

HTML:

<select id="horas">
  <option value="">Seleccione</option>
 </select>

JAVASCRIPT:

const horas = [{hora: "00:00", estado: true},{hora: "00:30", estado: false},{hora: "01:00", estado: true},{hora: "01:30", estado: true},{hora: "02:00", estado: false},{hora: "02:30", estado: true},];

  const alSelect = horas.map(el => `<option value=${el.hora} ${!el.estado ? "disabled" : ""}>${el.hora}</option>`).join(",");

  document.getElementById('horas').insertAdjacentHTML('beforeend', alSelect);

El objeto horas seria mas o menos lo que podrias estar recibiendo en la respuesta a la peticion, la hora y el estado (si esta disponible o no). Luego genero una nueva constante (let tambien funciona) con un map(). El map recorre cada elemento del arreglo (el) y crea una literal con el html y reemplaza donde sea necesario con los datos). Por ultimo, y lo que solicitabas uso un operador ternario (una manera abreviada de if/else) para determinar si la hora esta disponible o no, con esto se agrega el atributo disabled al option para que no lo puedan seleccionar. Luego inyecto el html que genere con la funcion insertAdyacentHTML. Espero te sirva para adaptarlo a lo tuyo

0

Puedes acceder por id al elemento dropdown usando JQuery y añadir las "options" iterando la data recibida y haciendo un .append por cada iteración.

Te dejo el ejemplo a continuación:

HTML

<select id="dropdown">
  <option value="">Item</option>
</select>

Js/Jquery

success: function (data) {
    $('#dropdown').empty().append('<option value="">Por defecto</option>')
    data.map((item) => {
      $('#dropdown').append('<option value="' + item.id + '">' + item.name + '</option>');
    });

  },

Puedes poner todas las condiciones que quieras dentro del .append() o sino mientras iteras, con if/else:

data.map((item) => {
  $('#dropdown').append('<option value="' + item.id + ' disabled=' + item.disabled ? true : false + '">' + item.name + '</option>');  
});

//or

data.map((item) => {
  if(item.disabled) $('#dropdown').append('<option value="' + item.id + ' disabled">' + item.name + '</option>');
  else $('#dropdown').append('<option value="' + item.id + '">' + item.name + '</option>');
  
});

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.