Select an option in a combobox and not be able to select it again in the next

0

I'm with the final project, and I'm stuck in one of my forms. I have 4 combobox with different options to select. What I'm looking for is that, if in a combobox I select one of the options, it can not be selected in any of the others, to avoid repetitions of the same option.

Ask what you want if you need to solve any more questions, or any part of the exact code.

My 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])

My 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'})
    
asked by Josema_23 27.09.2018 в 11:24
source

1 answer

0

First of all we should have our select: something like this:

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

in this case the select can do it from a django form and with the added attributes or widgets the onchange event that I use to call a function that validates the selection of each 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

What I do in this function is first get the values of each select by its id, this can be done by id, class..etc .. and then valid if they are the same and send an alert .. something basic and I apply a reset to the form .. it depends on your logic or what you want to do .. but it is a basic example and I hope it will be your guide. !!

full code:

<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>
    
answered by 02.10.2018 / 16:47
source