Comment montrer le "optgroup" valeur + valeur de l'option à la sélection

Prendre un coup d'oeil à la sélection suivante:

<select>
<optgroup label="A">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<optgroup label="B">
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
</select>

Lorsque un élément est sélectionné, je voudrais afficher son étiquette + valeur dans la sélection au lieu de juste valeur. Donc, si 4 est sélectionné, je voudrais la sélection pour afficher les B - 4

fermer votre "optgroup" balises correctement

OriginalL'auteur user1029829 | 2013-09-26

  1. 9

    si vous avez besoin de la valeur sélectionnée à sa valeur d'origine... essayez ceci...
    http://jsfiddle.net/kasperfish/sxvW2/2/

    $('select').change(function () {
    var opt = $(this).find(':selected');
    var sel = opt.text();
    var og = opt.closest('optgroup').attr('label');
    //alert(sel);
    //alert(og);

    $(this).blur().find(':selected').text(sel + '-' + og);

});

$('select').focus(function () {
    $(this).find('option').each(function(){
        console.log($(this).text());
        t=$(this).text().split('-');
        $(this).text(t[0]);

    });

});

    Mise à JOUR
    à l'aide de la select2 plugin, vous pouvez effectuer les opérations suivantes
    http://jsfiddle.net/kasperfish/bJxFR/4/

    function format(item) {
       opt = $('select').find(':selected');
       sel = opt.text();
       og = opt.closest('optgroup').attr('label');
      return item.text+'-'+og;

}
$("select").select2({
formatSelection: format,
escapeMarkup: function(m) { return m; }
});
    Aucune idée de comment le faire en utilisant le Select2 plugin jquery?
    vous aurez à modifier le code source plugins ou de déclencher le code ci-dessus dans un select2-plugin de rappel (le cas échéant).
    jsfiddle.net/bJxFR/3
    mise à jour de ma réponse pour select2
    Votre démo a un bug (je ne comprends pas pourquoi), mais en changeant de opt à opt = $(item.element); il fixe.

    OriginalL'auteur kasper Taeymans

  2. 1

    Son hacky pour mettre à jour la valeur sélectionnée, mais regardez cette démo

    Hacky Démo

    $('#select').change(function () {
    var selectedOption = $('#select option:selected');
    var label = selectedOption.closest('optgroup').attr('label');
    var selectText = selectedOption.text();

    var length = $(this).find(':selected').text().length;

    if (length < 2) {
        $(this).find(':selected').text(label + ' - ' + selectText);
    }
});
    Comment serait-il à l'aide de Select2?
    je n'ai pas.. j'ai ajouté la démo, veuillez jeter un oeil à ce
    C'est très bien, maintenant, essayez de régler sélectionne la valeur à une valeur qui n'est pas dans les options !
    Je suis à l'aide de la Select2 plugin pour jquery comme indiqué ci-dessus. Il doit être fait à l'aide de ses options ou ça ne marcherait pas.
    oups j'ai raté ça .. désolé

    OriginalL'auteur Krishna

  3. 0

    Essayez ceci:

    jsFiddle ici

    HTML:

    <select>
    <optgroup label="A">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <optgroup label="B">
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
</select>

    jQuery/javascript:

    $('select').change(function () {
    var opt = $(this).find(':selected');
    var sel = opt.text();
    var og = opt.closest('optgroup').attr('label');
    //alert(sel);
    //alert(og);

    $(this).find(':selected').text(sel + '-' + og);

});
    Aucune idée de comment le faire en utilisant le Select2 plugin jquery?
    S'il vous plaît mettez ensemble un jsfiddle par exemple, moqué, et notamment la Select2 plugin (vous devriez être en mesure de charger le js via le jsDelivr CDN site -- utiliser les ressources externes de l'accordéon onglet et coller l'URL du moins le http: préfixe.
    Ici, j'ai raillé vide jsFiddle shell pour ta question, avec le Select2 plugin pré-chargés. (Voir Ressources Externes accordéon). Juste ajouter du code HTML/jQuery code pour démontrer ce n'est pas de travail, et la mise à JOUR. Ensuite modifier votre question originale et de la version révisée de l'URL comme un jsFiddle lien. [jsFiddle here](http://jsfiddle.net/xxxxxx/)
    Ok, elle est ici: jsfiddle.net/bJxFR/3 Essayez de sélectionner l'une des valeurs. Si vous sélectionnez 1, la liste déroulante va dire 1, si vous sélectionnez 5 on va dire 5. J'ai envie de dire A - 1 ou B - 5.

    OriginalL'auteur gibberish