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 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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