0

Estoy con el proyecto final de carrera, y estoy atrancado en uno de mis formularios. Tengo 4 combobox con distintas opciones para seleccionar. Lo que busco es que, si en un combobox selecciono una de las opciones, ésta no pueda ser seleccionada en ninguno de los demás, para así evitar repeticiones de la misma opción.

Preguntad lo que queráis si necesitáis que os resuelva alguna duda más, o alguna parte de código exacta.

Mi models.py

nota_35='35'
nota_36='36'
nota_37='37'
nota_38='38'
nota_39='39'
nota_40='40'
nota_41='41'
nota_42='42'
nota_43='43'
nota_44='44'
nota_45='45'
nota_46='46'
nota_47='47'
nota_48='48'
nota_49='49'
nota_50='50'
nota_51='51'
nota_52='52'
nota_53='53'
nota_54='54'
nota_55='55'
nota_56='56'
nota_57='57'
nota_58='58'
nota_59='59'
nota_60='60'
nota_61='61'
nota_62='62'
nota_63='63'
nota_64='64'
nota_65='65'
nota_66='66'
nota_67='67'
nota_68='68'
nota_69='69'
nota_70='70'
nota_71='71'
nota_72='72'
nota_73='73'
nota_74='74'
nota_75='75'
nota_76='76'
nota_77='77'
nota_78='78'
nota_79='79'
nota_80='80'
nota_81='81'

notas=((nota_35,'Acoustic Bass Drum'),(nota_36,'Bass Drum 1'),(nota_37,'Side Stick'),(nota_38,'Acoustic Snare'),(nota_39,'Hand Clap'),
(nota_40,'Electric Snare'),(nota_41,'Low Floor Tom'),(nota_42,'Closed Hi Hat'),(nota_43,'High Floor Tom'),(nota_44,'Pedal Hi-Hat'),
(nota_45,'Low Tom'),(nota_46,'Open Hi-Hat'),(nota_47,'Low-Mid Tom'),(nota_48,'Hi-Mid Tom'),(nota_49,'Crash Cymbal 1'),(nota_50,'High Tom'),
(nota_51,'Ride Cymbal 1'),(nota_52,'Chinese Cymbal'),(nota_53,'Ride Bell'),(nota_54,'Tambourine'),(nota_55,'Splash Cymbal'),
(nota_56,'Cowbell'),(nota_57,'Crash Cymbal 2'),(nota_58,'Vibraslap'),(nota_59,'Ride Cymbal 2'),(nota_60,'Hi Bongo'),(nota_61,'Low Bongo'),
(nota_62,'Mute Hi Conga'),(nota_63,'Open Hi Conga'),(nota_64,'Low Conga'),(nota_65,'High Timbale'),(nota_66,'Low Timbale'),(nota_67,'High Agogo'),
(nota_68,'Low Agogo'),(nota_69,'Cabasa'),(nota_70,'Maracas'),(nota_71,'Short Whistle'),(nota_72,'Long Whistle'),(nota_73,'Short Guiro'),
(nota_74,'Long Guiro'),(nota_75,'Claves'),(nota_76,'Hi Wood Block'),(nota_77,'Low Wood Block'),(nota_78,'Mute Cuica'),(nota_79,'Open Cuica'),
(nota_80,'Mute Triangle'),(nota_81,'Open Triangle'))

nota_pad_verde=models.CharField(max_length=2, choices=notas, default=notas[0][0])
nota_pad_gris=models.CharField(max_length=2, choices=notas, default=notas[0][0])
nota_pad_azul=models.CharField(max_length=2, choices=notas, default=notas[0][0])
nota_pad_amarillo=models.CharField(max_length=2, choices=notas, default=notas[0][0])
nota_pad_rojo=models.CharField(max_length=2, choices=notas, default=notas[0][0])

Mi forms.py

class FormCancion(forms.ModelForm):
    class Meta:
        model = Cancion
        fields= ['nota_pad_verde','nota_pad_gris','nota_pad_azul','nota_pad_amarillo','nota_pad_rojo']
    def __init__(self, *args, **kwargs):
        super(FormCancion, self).__init__(*args, **kwargs)
        self.fields['nota_pad_verde'].widget.attrs.update({'required':'','data-html':'true','title':'Instrumento que se desea asignar al pad verde','data-toggle':'tooltip', 'data-placement':'right'})
        self.fields['nota_pad_gris'].widget.attrs.update({'required':'','data-html':'true','title':'Instrumento que se desea asignar al pad gris','data-toggle':'tooltip', 'data-placement':'right'})
        self.fields['nota_pad_azul'].widget.attrs.update({'required':'','data-html':'true','title':'Instrumento que se desea asignar al pad azul','data-toggle':'tooltip', 'data-placement':'right'})
        self.fields['nota_pad_amarillo'].widget.attrs.update({'required':'','data-html':'true','title':'Instrumento que se desea asignar al pad amarillo', 'data-toggle':'tooltip', 'data-placement':'right'})
        self.fields['nota_pad_rojo'].widget.attrs.update({'required':'','data-html':'true','title':'Instrumento que se desea asignar al pad rojo','data-toggle':'tooltip', 'data-placement':'right'})
5
  • te sugiero usar algo de jquery .javascript....en el evento onchange de tu select agrega..o manda a llamar una funcion que valide la seleccion de cada uno..que no se repitan entre si..!! el 28 sep. 2018 a las 17:48
  • Podrias orientarme más o menos como debería hacer eso? Ando un poco perdido en Javascript y no sabría exactamente como hacerlo
    – Josema_23
    el 2 oct. 2018 a las 9:15
  • si claro ya posteo una posible solucion..!! el 2 oct. 2018 a las 14:05
  • Tengo una duda, a ver si me la pudieses resolver. En el campo del select, las opciones que a mi me gustaría introducir las tengo en un modelo como choices, y no se como acoplarlo al formulario de html que me indicaste. ¿Podrías ayudarme a solucionar esto? @Tegito123
    – Josema_23
    el 10 oct. 2018 a las 10:37
  • espero esto te ayude: justpaste.it/4dcby el 11 oct. 2018 a las 14:17

1 respuesta 1

0

Primero que nada deberiamos tener nuestros select: algo asi:

<form id="myform">
<label for="nota1">Nota1:</label>
<select id="nota_1" onchange="validar();">
<option selected disable>Seleccione</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<br>
<label for="nota2">Nota2:</label>
<select id="nota_2" onchange="validar();">
<option selected disable>Seleccione</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</form>

en este caso el select puedes hacerlo desde un form de django y con los atributos o widgets adicionas el evento onchange que yo uso para llamar a una funcion que valide la seleccion de cada select.

function validar(){

  var select1 = $("#nota_1").val();
  var select2 = $("#nota_2").val();
  if (select1 ==select2 ){
    alert("Seleccione valores distintos !!");
    //reset form
    document.getElementById('myform').reset();
  }
    return false;
}//end function validar

lo que hago en esta funcion es primero obtener los valores de cada select mediante su id, esto lo puedes hacer por id, clase..etc.. y luego valido si son iguales y mando hacer un alert..algo basico y aplico un reset al form..ya depende tu logica o lo que deseas hacer.. pero es un ejemplo basico y espero te sirva de guia.!!

codigo completo:

<form id="myform">
<label for="nota1">Nota1:</label>
<select id="nota_1" onchange="validar();">
<option selected disable>Seleccione</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<br>
<label for="nota2">Nota2:</label>
<select id="nota_2" onchange="validar();">
<option selected disable>Seleccione</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</form>
<script>
function validar(){

  var select1 = $("#nota_1").val();
  var select2 = $("#nota_2").val();
  if (select1 ==select2 ){
    alert("Seleccione valores distintos !!");
    //reset form
    document.getElementById('myform').reset();
  }
    return false;
}//end function validar
</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.