Les Questions De Valeur De Réglage/De L'Étiquette À L'Aide De DropKick Javascript

de travail démo : Avec Commnet http://jsfiddle.net/aNS9R/218/ && sans commentaires seulement 7 lignes nécessaires: http://jsfiddle.net/aNS9R/220/

-ouf-

Donc, pour commencer, j'ai essayé de Modifier l'événement [de dropkick] avec en drop kick, mais c'est uniquement pour l'événement de changement au sein de sélectionner et de pas à l'externe de l'élément de liaison. c'est à dire dans votre cas, le bouton modifier.

; C'est ce que j'ai fait:

Explication (si vous êtes intéressés)

J'ai utilisé firebug pour inspecter la variable et a constaté que dropkick maréchal de votre existant, sélectionnez-la avec beau style maintenant, quand vous avez utilisé $('#timePreference option:selected').val("1"); dropkick actually did changed the selected value with in your element with id=timePreference but the div and ul and li styling qui est créé par dropkick n'est pas encore changé.

La durée, il a une classe .dk_label et pour le courant (de couleur verte) est donnée par .dk_option_current classe.

Veuillez Noter j'ai à peu près lu le plugin et de comprendre ce qui se passe ici: https://github.com/JamieLottering/DropKick/blob/master/jquery.dropkick-1.0.0.js

Si vous souhaitez utiliser firebug et de voir comment les éléments sont en soi d'utiliser ce lien : http://jsfiddle.net/aNS9R/218/show/ et de jouer avec votre inspecter mode, vous verrez dropkick style et la façon dont il fonctionne.

JQuery code

 $(document).ready(function() {

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

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

        //Assign slected option value to your select here - 
        //you can also make it something like this but your existing cdoe works anyways $("select_id option[value='3']").attr('selected','selected');
        $('#timePreference').val("1");

        //Now assign the select text value to the dropkick added element.
        //If you will use firebug you can see the nice <div>, <ul> & <li> structure which morph your dropdown.

        $('.dk_label').text(1);

      //further if you want green color to be selected. class=dk_option_current does that
      //You need to loop through the dropkick hierachy

      $(".dk_options_inner li").each(function(){

        $(this).removeAttr('class');
        if ($(this).text() == "1"){
           $(this).attr('class', 'dk_option_current');
        }
      });

    });
});
​

Espère que cela vous aide mate, cheers!

HTML

     <select id="timePreference">
        <option value="Choose" selected="selected">Choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
     </select>

    <input name="go" id="go" type="button" value="change" />

​

OriginalL'auteur Tats_innit

Je suis un peu en retard de réponse mais j'ai récemment rencontré le même problème - mise à jour d'un Dropkick DDL après qu'il a été créé. J'ai pris Tats_innit du code et l'a modifié légèrement, la création d'une fonction qui vous permet de tout simplement passer l'ID de l'élément select et la valeur que vous souhaitez la changer.

function updateDropkickDDL(id, value) {

    //Get the select element and dropkick container
    var select = $(id);
    var dk = select.prev('.dk_container');

    //Set the value of the select
    select.val(value);        

    //Loop through the dropkick options
    dk.find('.dk_options_inner').children("li").each(function () {

        var li = $(this);
        var link = li.children('a');

        //Remove the 'current' class if it has it
        li.removeClass('dk_option_current');

        //If the option has the value we passed in
        if (link.data('dk-dropdown-value') == value) {

            //Set the 'current' class on the option
            li.addClass('dk_option_current');

            //Set the text of the dropkick element
            dk.find('.dk_label').text(link.text());

        }

    });

}

Vous devriez maintenant être en mesure de simplement appeler updateDropkickDDL sur le clic d'un bouton ou similaires, par exemple, pour définir la valeur de la liste déroulante dans votre question à 1, vous devez utiliser:

$(document).ready(function(){

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

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

        updateDropkickDDL('#start', 1)

    });

}

Cette fonction permet également l'utilisation de plusieurs dropkick de liste déroulante sur la page, seule une mise à jour spécifié déroulante.

J'espère que cela aidera quelqu'un d'autre rencontre ce problème.

OriginalL'auteur patg

meilleur moyen pour changer la valeur

il suffit d'ajouter à jquery.dropkick-X.X.X.js
après

methods.reset = function () {
...
};

ce code

//change value of current select
//usage: $("...").dropkick('select', select_value);
methods.select = function (value) {
for (var i = 0, l = lists.length; i < l; i++) {
  var
    listData  = lists[i].data('dropkick'),
    $dk       = listData.$dk
  ;
  if ($(this)[0] == $dk.next()[0]){
    var $current  = $($dk.find('li a[data-dk-dropdown-value="' + value + '"]')[0]).closest('li');
    $dk.find('.dk_label').text(listData.label);
    $dk.find('.dk_options_inner').animate({ scrollTop: 0 }, 0);

    _setCurrent($current, $dk);
    _updateFields($current, $dk, true);
    var data  = $dk.data('dropkick');
    var $select = data.$select;
    $select.val(value);

    if ($.browser.msie)
      $current.find('a').trigger('mousedown');
    else
      $current.find('a').trigger('click');
    break;
  }
}
};

usage: $("...").dropkick('select', select_value);

pros

- natif de changer l'état de dropkick objet

- changer l'option sélectionnée dans l'original, sélectionnez

- l'événement déclencheur, utile si vous écoutez "changement" de l'état

contre

- besoin de changer de bibliothèque d'origine

- long code 🙂

OriginalL'auteur iscariot