La sémantique de l'INTERFACE utilisateur Dynamique Déroulante

Eu un problème avec la sémantique de l'interface utilisateur menu déroulant.


J'ai été en utilisant la Sémantique de l'Interface utilisateur, et je voulais changer le menu déroulant de l'élément de façon dynamique.
C'est, quand je choisis la valeur à partir de la première liste déroulante, la deuxième liste déroulante de l'élément va changer.
Mais le truc, c'est que lorsque les articles sont modifiés, la deuxième liste déroulante ne peut pas être choisi,
la valeur ne change pas. La liste déroulante de ne pas réduire de retour.

Le HTML


La Première Liste Déroulante

<div id="programmetype" class="ui fluid selection dropdown">
    <input type="hidden" name="programmetype">
    <div class="text">Choose..</div>
    <i class="dropdown icon"></i>
    <div class="menu">
       <div class="item" data-value="val1">Car</div>
       <div class="item" data-value="val2">Tank</div>
       <div class="item" data-value="val3">Plane</div>
    </div>
</div>

Deuxième Liste Déroulante

<div id="servicetype" class="ui fluid selection dropdown">
    <input type="hidden" name="servicetype">
    <div class="text">Choose..</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" data-value="select">Choose..</div>
    </div>
</div>

..........................


Le jQuery

$("#programmetype").dropdown({
            onChange: function (val) {
                if (val == "val1")
                {
                    $('#servicetype .menu').html(
                        '<div class="item" data-value="val1">Saloon</div>' +
                        '<div class="item" data-value="val2">Truck</div>'
                        );
                };

                if (val == "val2")
                {
                    $('#servicetype .menu').html(
                        '<div class="item" data-value="val1">Abraham</div>' +
                        '<div class="item" data-value="val2">Leopard</div>' +
                        );
                };

                if (val == "val3")
                {
                    $('#servicetype .menu').html(
                        '<div class="item" data-value="val1">Jet</div>' +
                        '<div class="item" data-value="val2">Bomber</div>' +
                        );
                };
            }
        });
InformationsquelleAutor Nerdar | 2014-03-04
  1. 6

    Trouvé,

    J'ai mis $('#servicetype').dropdown();
    après affectation de valeurs:

    $("#programmetype").dropdown({
                onChange: function (val) {
                    if (val == "fertility")
                    {
                        $('#servicetype').dropdown({'set value':'something'});
                        $('#servicetype .menu').html(
                            '<div class="item" data-value="acp">ACP</div>' +
                            '<div class="item" data-value="art">ART</div>'
                            );
                        $('#servicetype').dropdown();
                    };
});
    • Malheureusement, cela écrase le précédent état des composants, ce qui signifie que vous perdez tout stockés "par défaut". J'ai déposé un rapport de bug: github.com/Semantic-Org/Semantic-UI/issues/953
    • Notez également que cette cause tous les gestionnaires d'événements à ajouter à nouveau un "changement" de l'événement sera déclenché deux fois. Pour moi, ce n'était pas souhaitable.
    • Remarque: comme indiqué dans le problème ci-dessus, comme des v. 1.0 l'approche correcte est $('.ui.dropdown').dropdown('refresh');
    InformationsquelleAutor Nerdar
  2. 3

    Une solution de contournement approche:

    function setDinamicOptions(selector, options) {
    var att = "data-dinamic-opt";
    $(selector).find('[' + att + ']').remove();
    var html = $(selector + ' .menu').html();
    for(key in options) {
        html += '<div class="item" data-value="' + options[key] + '" ' + att + '>' + key + '</div>';
    }
    $(selector + ' .menu').html(html);
    $(selector).dropdown();
}
$("#programmetype").dropdown({
    onChange: function (val) {
        if (val == "val1")
            setDinamicOptions('#servicetype', {Saloon:'val1', Truck:'val2'});
        if (val == "val2")
            setDinamicOptions('#servicetype', {Abraham:'val1', Leopard:'val2'});
        if (val == "val3")
            setDinamicOptions('#servicetype', {Jet:'val1', Bomber:'val2'});
    }
});

    De l'essayer.

    InformationsquelleAutor Artur Luiz Oliveira
  3. 0

    Si vous voulez passez un effet d'ouvrir le menu déroulant, puis vous n'avez pas besoin d'utiliser le javascript, au lieu de cela, vous pouvez ajouter une classe simple pour votre div parent

    c'est une démo
    http://jsfiddle.net/BJyQ7/30/

    <div class="ui simple dropdown item">
    <i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
    <div class="menu">
        <a class="item"><i class="fa fa-users"></i> Players</a>
        <a class="item"><i class="fa fa-user-md"></i> Staff</a>
    </div>
</div>
    InformationsquelleAutor user3013507
  4. 0

    Une autre approche pour le menu déroulant paramètre contenu dans le temps (par exemple basé sur certains critères dynamiques) est à l'aide de la remoteApi, qui est particulièrement regrettable que le nom de la fonction de liaison de données de la SemanticUI des listes déroulantes.

    Suivez les instructions ici: http://semantic-ui.com/behaviors/api.html#mocking-responses

    InformationsquelleAutor Peter Aron Zentai