0
J'ai obtenu un petit codepen où j'ai des onglets à sélection multiple (avec le widget jQuery sélectionnable). Au-dessus, j'ai reçu un formulaire avec une entrée de texte et un bouton de soumission. Lorsque j'insère du texte et le soumets, il ajoute le texte dans la liste de chaque onglet. Mon but est que le texte d'entrée soit seulement ajouté sur les listes des onglets sélectionnés. Thats my javascript:Ajouter un élément de liste uniquement aux listes dans les onglets sélectionnés
$(function() {
function selectionChange(event, ui) {
var items = $('.ui-selected', this).map(function() {
return $(this).index();
}).get();
$("section").each(function() {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
console.log(items);
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
$(function(){
$('#plannerform').submit(function(e){
var val = $(this).find('#plannername').val();
$('ul.plannerlist').append('<li>' + val + '</li>');
e.preventDefault();
});
});
Et c'est le HTML:
<form id="plannerform">
<input id="plannername" placeholder="Name eingeben" type="text"></input><!--
--><input id="plannersubmit" type="submit" value="eintragen"></input>
</form>
<ol id="selectable">
<li class="ui-widget-content">FR PM</li>
<li class="ui-widget-content">SA AM</li>
<li class="ui-widget-content">SA PM</li>
<li class="ui-widget-content">SO AM</li>
<li class="ui-widget-content">SO PM</li>
<li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
<section class="tabcontent">1
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">2
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">3
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">4
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">5
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">6
<ul class="plannerlist">
</ul>
</section>
</div>
Si vous avez besoin plus de code, le code complet est sur mes codepen que je l'ai mentionné ci-dessus.
Ah je ne le savais pas: visible. Merci pour cette solution simple. Cette deuxième partie, à savoir que l'élément est ajouté à la première liste, lorsqu'aucun onglet n'est sélectionné, ne me concerne pas du tout, car je souhaite que l'utilisateur sélectionne d'abord des onglets puis les soumette (avec quelques notes). Mais merci pour ça :) Bon à savoir. –
@TobiasGlaus np. Dans ce cas, vous pouvez désactiver l'entrée de recherche si quelqu'un n'a pas sélectionné un onglet (probablement un mauvais UX, car l'utilisateur peut ne pas savoir qu'il doit sélectionner un onglet avant de chercher), ou faire le premier onglet sélectionné par défaut (semble être une meilleure solution). –
Oui, c'est comme un planificateur où vous pouvez vous inscrire pour quelques jours. Donc, je pense que la désactivation de l'entrée de recherche est la meilleure solution. –