7
votes

Problèmes de réglage de la valeur / de l'étiquette à l'aide de Dropkick JavaScript

J'utilise un beau plugin élégant appelé Dropkick pour mon webapp http: //jamielottering.github. com / dropkick / , et je semble avoir une légère question avec elle et je ne suis pas sûr de savoir comment essayer de le réparer. J'essaie de modifier de manière programmable la valeur du menu déroulant Sélectionner. Ci-dessous une description de mon problème et un lien vers Jsfiddle.

html: xxx

jQuery: xxx

Lorsque j'affiche la valeur en alerte, cela montre comme une, mais lorsque je regarde les étiquettes de l'option, il reste à la valeur par défaut ou quoi que ce soit avant le monnaie.

Par exemple, si ma valeur par défaut était "Choisir" et je clique sur Somediv, alors alerte affichera "1", de sorte qu'il change, mais la liste déroulante Sélectionnera toujours "Choisir". Aucune suggestion. Je ne manquerai pas quelque chose de petit, pas sûr.

fsfiddle: http: // jsfiddle.net/kdp8791/ans9r/61/


5 commentaires

hiya pouvez-vous jsfiddle le problème s'il vous plaît? Je pourrais peut-être vous aider, acclamer!


Voici un lien vers le jsfiddle: jsfiddle.net/kdp8791/ans9r/61


Hiya update mate: @ kdp8791 okies, j'ai fait une solution à ce sujet le mettre à jour en quelques heures lorsque je vais avoir suffisamment de temps pour répondre en détail en détail, la question était la morphing du CSS qui se produit lorsque Dropkick Styling est ajouté, répondra à votre question. avec tout le détail et pourrait l'optimiser comme je vais. (Lol - c'était dans ma tête entière journée :) C'est bon de voir tout ce qui fonctionne. : P vive.


Oh mec! Life Saver! J'apprécie vraiment l'aide!!!!! Je ne peux pas l'exprimer assez :-)


Quelqu'un sache comment réparer le problème de la largeur multiple? Stackoverflow.com/Questtions/11769888/...


5 Réponses :


12
votes

Démo de travail : avec COMMNET http: // jsfiddle.net/ans9r/218/ && sans commentaire Seulement 7 lignes nécessaires: http://jsfiddle.net/ans9r/220/

-Phat-

Donc, pour commencer avec j'ai essayé un événement de changement [de Dropkick] avec le coup de pied de goutte Pour l'événement de changement dans SELECT et pas de la liaison d'élément externe. c'est-à-dire dans votre bouton de changement de cas.

SO; C'est ce que j'ai fait:

explication (si vous êtes intéressé)

J'ai utilisé Firebug pour inspecter la variable et trouvez que Dropkick marshal votre sélection existante avec beau style maintenant quand vous avez utilisé $ ('# option TimePréence: sélectionné'). Val ("1"); Dropkick a effectivement changé la valeur sélectionnée avec ID = TIMEPRÉFERENCE MAIS Le DIV et UL et LI Styling Créé par Dropkick n'est pas encore changé.

pour la plage choisie, il a une classe .dk_label et pour la couleur actuelle (couleur verte) est donnée par .dk_option_current classe.

Veuillez noter J'aime à peu près le plugin et déterminer ce qui se passe à partir d'ici: https://github.com/jamielottering/dropkick/blob/master/jquery.dropkick-1.0.0.js

Si vous souhaitez utiliser Firebug et voir comment les éléments utilisent ce lien: http: // jsfiddle.net/ans9r/218/show/ et jouez avec votre mode d'inspection, vous verrez le style Dropkick et comment cela fonctionne.

JQuery Code xxx

espère que cela vous aide à mate, à acclamer!

html xxx


6 commentaires

Cela semblait fonctionner, mais dans l'éventualité, j'avais 2 Dropkick's Comment puis-je seulement changer un au lieu des deux?


Hiya, cooleos; Donc, chaque Dropkick Select a un identifiant et un nom unique; Vous utiliserez l'API .Closest API: API.JQUERY.COM/CLOSEST pour que vous puissiez changer. Explication supplémentaire Donc, si vous inspectez HTML à l'aide de Firebug, chaque nouveau Dropkick pour SELECT avait une identification unique, c'est-à-dire dans l'exemple ci-dessus ID = TIMEPRÉGRAPENCE DROP KICK AJOUTÉ Ceci pour une présentation agréable comme celle-ci

espère que cela aide, acclamer!


Vraiment apprécier l'aide Tats_innit. J'ai fini par utiliser des enfants () au lieu de plus près de trouver le label approprié. Ça a marché! jsfiddle.net/ans9r/260


Pas de problème! Heureux ça fonctionnait! À moins que l'API ne se développe pour ce plugin, ce travail autour devrait aller bien. Bonne bonne chance!


@ KDP8791 Merci pour vos enfants Jsfiddle, a fonctionné super pour moi avec plusieurs Dropkicks sur une page!


Pas de problème, content que cela ait aidé! :)



3
votes

Je suis un peu tardif de cela, mais j'ai récemment rencontré le même problème - Mise à jour d'un Dropkick DDL après sa création. J'ai pris le code de Tats_innit et l'a légèrement modifié, créant une fonction qui vous permet de passer simplement l'identifiant de l'élément Select et de la valeur que vous souhaitez modifier.

$(document).ready(function(){

    $('#start').dropkick();

    $('#someDiv').click(function(){

        updateDropkickDDL('#start', 1)

    });

}


0 commentaires

3
votes

Je sais que cette question est de quelques mois, mais pour toute personne qui cherche cela plus tard, je souhaitais ajouter ce lien à une demande de retrait sur le référentiel Dropkick qui ajoute une option "Synchronisation inversée" qui met à jour le menu déroulant personnalisé chaque fois que L'objet de sélection sous-jacent change. Cela vous permet de simplement mettre à jour l'objet Sélectionner dans votre code et les mises à jour déroulantes Dropkick personnalisées sur l'événement "Changer".

https://github.com/jamielottering/dropkick/pull/27 < / p>


1 commentaires

Merci! On dirait que cela a été fusionné dans le maître. J'ai dû changer $ ('# saisons-filtre'). Val ("*") à $ ("# # saisons-filtre"). Val ("*"). Changer ( ); pour le faire tirer dessus, mais c'est de loin la meilleure option pour moi.



7
votes

Vous pouvez définir la valeur Dropkick de manière programmatique par jQuery Trigger d'un événement de clic sur l'option Dropkick sélectionnée.

$option = $('#dk_container_'+ k +' .dk_options a[data-dk-dropdown-value="'+ v +'"]');

$option.trigger("click");


2 commentaires

Nice, ça marche. L'événement est attrapé par le rappel des changements Dropkick!


J'aime cette option, fonctionne bien avec le passage d'observables Knockout!



2
votes

meilleur moyen de changer la valeur
Il suffit d'ajouter à jquery.dropkick-x.x.x.js Après xxx

ce code xxx

USAGE: $ ("..."). Dropkick ("SELECT", SELECT_VALUE); < / p>

de
- Changement natif état d'objet Dropkick
- Modifier l'option sélectionnée dans l'original Select
- événement déclencheur, utile si vous écoutez "changement" d'état
de
contre - Besoin de changer la bibliothèque d'origine
- Long Code :)


0 commentaires