Modifier le texte de la case sélectionnée d'un menu de sélection lors de l'événement onChange

Question

J'ai un menu de sélection avec les options suivantes

<select>
<option>--1</option>
<option>--2</option>
<option>--3</option>
<option>--4</option>
</select>

Quand je sélectionne un élément dans le menu de sélection, il affiche '--2' dans la boîte. Je veux seulement '2' à afficher dans la case de l'élément sélectionné. Comment puis-je le faire ?

Si j'obtiens une solution en jQuery, ce serait plus préférable.

Note : Je ne veux pas que les valeurs affichées dans le menu déroulant puissent être modifiées à tout moment, mais la valeur qui s'affiche dans la boîte de sélection ne doit pas comporter de '--' (tirets).

Answer 1

Il semble que ce que vous essayez de faire est d'avoir une valeur d'affichage et une valeur que Javascript peut lire. Dans ce cas, je vous propose de modifier votre select plutôt que d'écrire du javascript personnalisé pour modifier l'apparence. Cela semble pouvoir résoudre votre problème.

J'écrirais le select selon les indications suivantes :

<select>
    <option value="--1">1</option>
    <option value="--2">2</option>
    <option value="--3">3</option>
    <option value="--4">4</option>
</select>

puis lire la valeur au lieu du texte de l'élément d'option (voir ceci : http://www.w3schools.com/TAGS/tag_option.asp )

la solution que vous proposez serait difficile à mettre en œuvre avec javascript ou jquery, à moins de remplacer l'ensemble de la sélection par un élément personnalisé.

Answer 2

alert("--1".replace("--", ""));

donc :

$("select").change(function() {
    $("#someInput").val($(this).val().replace("--", ""));
});

Essayez-le ici.

Answer 3

Si vous voulez juste remplacer toutes les entrées, vous pouvez appeler

$(function() {
    $('select').find('option').each(function(index,elem) {
        $(elem).text(function(i, text) {
            return text.replace(/^--/, '');
        });
    });
});

si vous voulez remplacer une entrée uniquement lorsqu'elle est sélectionnée, procédez comme suit

$(function() {
    $('select').bind('change', function() {
        var self = this;

        $(this).find('option:selected').text(function(i, text) {
            if( self.last )
                $(self.last).text(function(i, oldtext) {
                    return '--' + oldtext;
                });

            self.last = this;

            return text.replace(/^--/, '');
        });
    });
});

Démonstration : http://www.jsfiddle.net/4yUqL/39/