Django фильтр выпадающий динамически, чтобы удалить ранее выбранное значение

Question

У меня есть 4 выпадающих меню, и все они заполнены моделью django. Итак, допустим, значения являются первичным ключом, и когда я выбираю любое значение в первом раскрывающемся меню, оно не должно быть доступно в оставшемся раскрывающемся меню.

Я уже искал и пробовал принятый ответ jquery из Аналогично заданный вопрос , но он не работает вообще.

Вот мой пример кода:

#views.py

from .models import myModel

def myFunction(request):
    data = myModel.objects.all()
    return render(request,'myPage.html',{'myData':data})

#myPage.html
<table>
<div id="select-group">
<tr>
   <td>
    <select name="dd1" id="dd1">
    {% for data in myData %}
       <option value={{data.id}}>{{data.name}}</option>
    {% endfor %}
    </select>
  </td>
  </tr>
<tr>
   <td>
    <select name="dd2" id="dd2">
    {% for data in myData %}
       <option value={{data.id}}>{{data.name}}</option>
    {% endfor %}
    </select>
  </td>
</tr>
... and rest
</div>
</table>

#jQuery
$('#select-group select').change(function(){
    var values = [];
    $('#select-group select').each(function(){
        if(this.value.length > 0)
            values.push(this.value);
    });

   $('#select-group select optgroup').each(function(){
        $(this).after('<option>'+          $(this).attr('label')+'</option>').remove();
    });

    $('#select-group select option').each(function(){   
        if($.inArray(this.value, values) > -1 &&
           !this.selected)                
        $(this).after('<optgroup label="'+this.value+'"></optgroup>').remove();
    });

});​

Чего мне не хватает? что-то не так в jQuery?

Answer 1

Это jQuery отлично работает ...

$(document).ready(function() {
$('select').on('change', function() {
  var selectedValues = [];
  $('select').each(function() {
    var thisValue = this.value;
    if(thisValue !== '')
      selectedValues.push(thisValue);
  }).each(function() {
    $(this).find('option:not(:selected)').each(function() {
      if( $.inArray( this.value, selectedValues ) === -1 ) {
        $(this).removeAttr('hidden');
      } else {
        if(this.value !== '')
          $(this).attr('hidden', 'hidden');
      }
    });
  });
});
});