Je travaille sur un projet où j'ai un formulaire qui aura plusieurs entrées "sélectionnelles", toutes avec le même ensemble d'options. Je voudrais utiliser jQuery pour désactiver / masquer une option dans le reste des entrées "Sélectionner", si elle a déjà été sélectionnée.
Par exemple: P>
<select id="1"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> </select> <select id="2"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> </select>
7 Réponses :
à masquer , utilisez l'approche suivante (puisque IE Bug empêche l'utilisation du paramètre de propriété CSS "Display" sur "Aucun" sur une option): -Store la liste d'origine d'options dans un tableau -Avoir une fonction pour créer le fichier Select #x à partir d'un tableau, glisser des éléments précédemment sélectionnés -Assigner un gestionnaire d'ONCHANGE pour tous les éléments sélectionnés et les appels ultérieurs Cette fonction. puis le HTML
Est-ce que la vanille JavaScript en réponse à une question de jQuery ?! +1 monsieur.
Mais pourquoi ne pas déplacer que ONCHANGE événement au JS aussi?
J'ai copié cet exemple et je ne peux pas le faire fonctionner. Je vais finir par avoir environ 14-16 Select Tags.
Vous pouvez faire quelque chose comme (bien sûr, vous pouvez utiliser directement Bien sûr, cela ne fonctionnera pas en arrière :) Dans ce cas, je vous suggère de construire vos options directement avec JavaScript afin que vous puissiez Avoir le plan complet d'éliminer les éléments en cas de besoin, avant de les substituer à divers $ (this) si vous envisagez d'ajouter le changement aux options elles-mêmes à travers le modifier gestionnaire) Sélectionnez
Voici un exemple de travail:
http://jsfiddle.net/anxby/ P >
Avec vos données, vous devez le faire: P>
$(document).ready(function() {
$('select').change(function() {
$('option[value=' + $(this).val() + ']').attr('disabled', 'disabled');
});
});
Comment ira-t-je pouvoir désactiver le «désactiver»? Dis si l'utilisateur a changé d'avis sur la valeur qu'ils ont sélectionnée?
Comment allais-je ajouter cela au code? Je ne suis pas JQuery Pro et n'a toujours pas mal de difficulté à comprendre exactement comment le code actuel applique l'attribut "désactivé"
S'il vous plaît regardez cela lorsque vous obtenez une seconde. Je ne sais pas trop comment implémenter la fonctionnalité Supprimer attribut. Je vais finir par utiliser environ 14-16 Select Tags.
Jetez un coup d'œil à Ceci . Il:
Désolé, a ajouté quelques caractères supplémentaires. fixé.
Cela ne réinitialisera pas les options sélectionnées précédentes si vous sélectionnez une fois de plus. Cela fait disparaître, ne pas désactiver.
Comment puis-je le faire afin qu'ils réinitialisent?
Vous pouvez soit faire .css ('désactivé', 'désactivé') et les identifier lorsque la valeur change ou vous pouvez stocker les valeurs dans un tableau et créer / les supprimer.
Ici, il y a le code pour continuer à sélectionner et à désactiver tous les temps que nous voulons.
première chose est d'activer chaque option, puis de regarder les valeurs sélectionnées et de désactiver les options qui coïncident avec les valeurs sélectionnées. < / p>
Ces 2 étapes sont cruciales car si vous sélectionnez à nouveau, les valeurs désactivées avant de continuer désactivées.
la manière la plus élégante, où nous utilisons la carte () ( dans Stackoverflow Il y a une bonne explication sur cette méthode ) et filtrer () jQuery fonctionne pour faire le travail. Moins de lignes, et je pense que la même performance ou mieux. http: // www .jsfiddle.net / dactivo / kedddr / nouvelle version J'ai édité ma réponse, Ceci est ma version finale: http://www.jsfiddle.net/ dactivo / knbwc / ancienne version
Sur la "nouvelle version", lorsque j'ai sélectionné une option sur la première sélection, sa désactivation 2 sur la seconde. Sur le «plus récent», ce n'est pas désactivé d'entre eux.
J'ai constaté que cela a essentiellement travaillé à l'exception de la première ligne qui permet à tous les champs. Pour moi avec Chrome en 2014, cela a entraîné une désactivation de tous les champs dès que toute liste déroulante est cliquée sur. Les suivants fixés pour moi: $ ("# importateur_to_acf_matchOptions sélectionnez l'option"). PROP ("désactivé", false); // active tout
Merci @AdamJones J'essaie de résoudre ce problème pendant un moment et j'ai juste pensé à lire les commentaires. J'ai toujours des difficultés avec réactivation des choses non sélectionnées, mais au moins, elles ne sont pas désactivées comme c'était.
Pour une raison quelconque, toutes les méthodes ici désactivent toujours toutes les valeurs pour moi chaque fois que je sélectionne une certaine valeur.
$(document).ready(function() {
$('#1').change(function() {
$('option.hidden').removeClass('hidden')
$('#2 option[value=' + $(this).val() + ']').addClass('hidden');
});
$('#2').change(function() {
$('option.hidden').removeClass('hidden')
$('#1 option[value=' + $(this).val() + ']').addClass('hidden');
});
});Make sure you have in css.hidden {display:none}
Cela ne réinitialisera pas les options sélectionnées précédentes si vous sélectionnez une fois de plus.
Cette question était la principale résultat de Google pour la recherche d'une réponse à cela, donc je posterai une réponse mise à jour ici. Ceci est presque exactement identique à la réponse de NetAdictos, mais fonctionne pour désactiver et réactiver les valeurs de sélection et utilise ProP au lieu de Attrib. Vérifié le travail en chrome 52.
$("select").change(function()
{
$("select option").prop("disabled",""); //enable everything
//collect the values from selected;
var arr = $.map
(
$("select option:selected"), function(n)
{
return n.value;
}
);
//disable elements
$("select option").filter(function()
{
return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values
}).prop("disabled","disabled");
//re-enable elements
$("select option").filter(function()
{
return $.inArray($(this).val(),arr)==-1; //if value is not in the array of selected values
}).prop("disabled","");
}).trigger("change"); // Trigger the change function on page load. Useful if select values are pre-selected.
Quelle réponse avez-vous enfin utilisé pls?
@netaDictos - Le vôtre a fini par travailler le meilleur mais, ce n'est toujours pas exactement ce que je cherchais. J'ai décidé d'utiliser JQuery UI pour faire des valeurs de formulaire draggible à la place. Merci quand même pour vôtre aide :)
JQuery Ui est toujours une façon très moderne de faire des choses, j'aime bien. Au moins, je pense que c'est la solution à la question telle qu'elle est décrite ;-)
@netadictos - en effet :) Merci encore