Erstellen einer dynamisch generierten Liste, die sich gegenseitig ausschließt

Question

Ich habe eine ungeordnete Liste, die als Teil eines Autocomplete-Dropdownfensters angezeigt wird und dynamisch generiert wird. Dies geschieht durch eine plugin, die nur nach einer Benutzerinteraktion im DOM angezeigt wird. Auf der betreffenden Seite kann diese Liste mehrfach gerendert werden. Ich möchte, dass die Liste sich gegenseitig ausschließt, so dass bei Auswahl eines Elements diese nicht mehr in einer neuen Liste ausgewählt werden kann. Das Hauptproblem, das ich habe, ist, dass ich darum kämpfe, Zugang zu dem Element zu bekommen, das ich tatsächlich brauche, um das Ereignis durchzuführen. Der Code, der für die Liste erzeugt wird, ist wie folgt:

<span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 310px; left: 523.172px;"> 
    <span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 144px;"> 
     <span class="select2-search select2-search--dropdown"> 
      <input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"> 
     </span> 
     <span class="select2-results"> 
      <ul class="select2-results__options" role="tree" id="select2-id_eventconfigstepkeycharacteristicfield_set-0-key_characteristic-results" aria-expanded="true" aria-hidden="false"> 
       <li class="select2-results__option" role="treeitem" aria-selected="true">Depot</li> 
       <li class="select2-results__option select2-results__option--highlighted" role="treeitem" aria-selected="false">Month</li> 
       <li class="select2-results__option" role="treeitem" aria-selected="false">bdfdf</li> 
      </ul> 
     </span> 
    </span> 
</span> 

Ich mag im Grunde machen, so dass, wenn ein liselect2-results__option--highlighted in seiner Klasse hat, wird es aus der Liste entfernt werden, wenn es wieder gemacht wird. Bisher kann ich den Zugriff auf diese erhalten durch Hinzufügen eines jQuery Ereignishandler:

$(document).on('click', '.select2-container.select2-container--default.select2-container--open', function() { 
    console.log('working'); 
}); 

und dies funktioniert, aber ich habe es nicht gelungen, die Liste zu bekommen.

Answer 1

Sie sollten in der Lage sein, Ihre Click-Handler einrichten, um alle anderen de-select:

$(document).on('click', '.select2-container.select2-container--default.select2-container--open li', function() { 
    $('.select2-results__option--highlighted').removeClass('select2-results__option--highlighted'); 
    $(this).addClass('select2-results__option--highlighted'); 
}); 

Sie können sogar in der Lage sein, es zu vereinfachen:

$(document).on('click', '.select2-container li', function() { 
    $('.select2-results__option--highlighted').removeClass('select2-results__option--highlighted'); 
    $(this).addClass('select2-results__option--highlighted'); 
}); 

Und, wenn Sie wollen alle anderen ausblenden:

$(document).on('click', '.select2-container li', function() { 
    $('.select2-results__option--highlighted').setStyle('display', 'none'); 
    $(this).setStyle('display', 'block'); 
});