Sélectionnez HTML montre la valeur à la place du texte

Est-il possible dans un html select, pour afficher la valeur de l'option à la place du texte?

Il va être utilisé pour l'affichage d'une longue disription dans la liste déroulante, mais lors de la sélection, il ne doit être présente un court texte/la valeur de l'option.

code:

<select>
    <option value="1">This is a long long text, that explains option 1</option>
    <option value="2">This is a long long text, that explains option 2</option>
</select>

Maintenant l'élément sélectionné, lorsque vous quittez le menu déroulant/combobox/que ce soit, ne doit affichage '1'

Afficher votre code.. il peut aider à comprendre ce que vous avez essayé
J'ai mis à jour la question, est-il vraiment pas possible?
Vous pouvez utiliser l'attribut label: stackoverflow.com/questions/3905984/...
Mettez votre valeur du code de retour de la valeur=your_code".

OriginalL'auteur AP87 | 2014-02-11

  1. 8

    Vous pouvez le faire en utilisant l'étiquette tag:

    <option value="the_value" label="the text displayed">the hidden text</option>
    "label" de l'attribut n'est pas pris en charge dans Firefox. Aussi, vous verrez que le texte de l'étiquette dans le menu déroulant et le même texte lorsque déroulante est fermé. Dans cet exemple, le "texte caché" sera envoyé au serveur lorsque le formulaire est soumis. Compte tenu de l'existence de la valeur de l'attribut, il est redondant.

    OriginalL'auteur Fernán García de Zúñiga

  2. 1

    Je pense que Cela peut vous aider à

    <select id='cboSelect'>
 <option value="1">This is a long long text, that explains option 1</option>
 <option value="2">This is a long long text, that explains option 2</option>
</select>

    Essayer cette jquery

    $("#cboSelect").change(function(){    
   $("#cboSelect option:selected").text($("#cboSelect").val());
});

    cela va changer le texte de l'option sélectionnée avec sa valeur correspondante

    Ici est le violon
    Violon

    Hmm oui, je pense qu'il n'y a pas de réponse à la chose que je voulais. Je vais aller dans une autre pour résoudre mon problème Merci pour votre réponse ..
    Cela va changer la valeur pour toujours. Ce n'est pas ce qu'attend d'elle.

    OriginalL'auteur Myth

  3. 1

    J'ai trouvé une solution qui pourrait résoudre votre problème:

    HTML:

    <select id="countryCode">
   <option data-text="his is a long long text, that explains option 1" value="1">This is a long long text, that explains option 1</option>
   <option data-text="his is a long long text, that explains option 1" value="2">This is a long long text, that explains option 1</option>
</select>

    jQuery: 

    $('#countryCode option:selected').html($('#countryCode option:selected').attr('value')); //already changed onload

$('#countryCode').on('change mouseleave', function(){
    $('#countryCode option').each(function(){
      $(this).html( $(this).attr('data-text') ); 
    });
    $('#countryCode option:selected').html(  $('#countryCode option:selected').attr('value')   );
    $(this).blur();
});
$('#countryCode').on('focus', function(){
    $('#countryCode option').each(function(){
        $(this).html( $(this).attr('data-text') ); 
    });
});

    http://jsfiddle.net/9y43gh4x/

    Dans le mobile, il ne fonctionne pas si l'utilisateur concentre sur la sélection de l'élément et de laisser sans sélectionner une option, car il n'y a pas de mouseleave événement. Aussi, l'utilisateur en mesure de voir que le texte est modifié à partir de "son est...." à "1". Micro secondes de retard....

    OriginalL'auteur Jordi Martí Domínguez

  4. 1

    C'est la solution.

    $("select option").each(function () {
    $(this).attr("data-label", $(this).text());
});
$("select").on("focus", function () {
    $(this).find("option").each(function () {
        $(this).text($(this).attr("data-label"));
    });
}).on("change mouseleave", function () {
    $(this).focus();
    $(this).find("option:selected").text($(this).val());
    $(this).blur();
}).change();
    fonctionne parfaitement pour les besoins actuels. Génial et à court de solution.
    Il ne fonctionne pas si l'utilisateur concentre sur la sélection de l'élément et de laisser sans sélectionner n'importe quelle option.
    ne vous signifie "mouseleave" ne fonctionne pas dans votre cas?
    Lorsqu'un utilisateur clique sur la balise select, mais le laisser comme il est, sans sélectionner d'autres options.

    OriginalL'auteur Jeffrey Neo

  5. 0

    Il suffit de ne pas donner une valeur:

    <select>
    <option>Test</option>
</select>

    Présentera Test lorsqu'il est sélectionné.

    Il suffit de placer les valeurs que vous mettez dans value que le texte.

    Vous ne pouvez pas afficher la valeur dans value= juste comme ça.

    J'ai mis à jour la question, est-il vraiment pas possible?

    OriginalL'auteur Madara Uchiha

  6. 0
     $('#countryCode').find('option:selected').text();

    OriginalL'auteur samehanwar