web-dev-qa-db-fra.com

Réinitialiser la valeur de sélection à la valeur par défaut

J'ai la boite de sélection

<select id="my_select">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

<div id="reset">
    reset
</div>

J'ai aussi un bouton de réinitialisation, ici la valeur par défaut (sélectionnée) est "b", supposons que je sélectionne "c" et après avoir besoin de rétablir la valeur de la zone de sélection par défaut, comment faire cela à l'aide de jQuery?

$("#reset").on("click", function () {
    // What do here?
});

jsfiddle: http://jsfiddle.net/T8sCf/1/

javascriptjqueryhtml
48
OTAR

Vous pouvez utiliser la propriété defaultSelected d'un élément d'option :

Contient la valeur initiale de l'attribut HTML selected, indiquant si l'option est sélectionnée par défaut ou non.

Ainsi, l'interface DOM garde déjà trace de l'option sélectionnée initialement.

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

D&EACUTE;MO

Cela pourrait même fonctionner pour des éléments à sélections multiples.

Si vous ne souhaitez pas parcourir toutes les options, mais "interrompre" après avoir trouvé celle sélectionnée à l'origine, vous pouvez utiliser .each à la place:

$('#my_select option').each(function () {
    if (this.defaultSelected) {
        this.selected = true;
        return false;
    }
});

Sans jQuery:

var options = document.querySelectorAll('#my_select option');
for (var i = 0, l = options.length; i < l; i++) {
    options[i].selected = options[i].defaultSelected;
}
65
Felix Kling
$('#my_select').get(0).selectedIndex = 1;

Mais, à mon avis, le meilleur moyen consiste à utiliser HTML uniquement (avec <input type="reset" />):

<form>
    <select id="my_select">
        <option value="a">a</option>
        <option value="b" selected="selected">b</option>
        <option value="c">c</option>
    </select>
    <input type="reset" value="reset" />
</form>
15
user1823761
$("#reset").on("click", function () {
    $("#my_select").val('b');//Setting the value as 'b'
});
14
웃웃웃웃웃

Vous pouvez utiliser l'attribut data de l'élément select

<select id="my_select" data-default-value="b">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

Votre javascript,

$("#reset").on("click", function () {
    $("#my_select").val($("#my_select").data("default-value"));
});

http://jsfiddle.net/T8sCf/10/

METTRE &AGRAVE; JOUR

Si vous ne connaissez pas la sélection par défaut et si vous ne pouvez pas mettre à jour le code HTML, Ajoutez le code suivant dans le dom ready,

$("#my_select").data("default-value",$("#my_select").val());

http://jsfiddle.net/T8sCf/24/

6
Chamika Sandamal

Pourquoi ne pas utiliser une simple fonction javascript et l'appeler lors d'un événement onclick?

function reset(){
document.getElementById("my_select").selectedIndex = 1; //1 = option 2
}
6
freeworlder

Une méthode simple consiste à ajouter un attribut data-default à la sélection

<select id="my_select" data-default="b">
...
</select>

Alors le code est vraiment simple:

$("#reset").on("click", function () {
    var $select = $('#my_select');
    $select.val($select.data('default'));
});

Exemple en direct: http://jsfiddle.net/T8sCf/7/

3
Jamiec

Vous pouvez également réinitialiser les valeurs de plusieurs SELECT et ensuite déclencher le bouton d'envoi.

S'il vous plaît voir ici en action:

Exemple en direct:

$(function(){
    $("#filter").click(function(){
        //alert('clicked!');
        $('#name').prop('selectedIndex',0);
        $('#name2').prop('selectedIndex',0);
        $('#submitBtn').click();
    });
});
3
Chale CS
$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});
3
IdemeNaHavaj

Avec jquery:

$("#reset").on("click", function() {
    $('#my_select').val($('#my_select').find('option[selected="selected"]').val());
}
1
OlivierB

Un moyen simple qui fonctionne est

 var myselect = $("select.SimpleAddAClass");
 myselect[0].selectedIndex = 0;
 myselect.selectmenu("refresh");
1
daniel_mutu

Liez un gestionnaire d'événements à l'événement focus de la select pour capturer la valeur précédente. Définissez ensuite la valeur de select sur la valeur précédente lorsque vous cliquez sur Réinitialiser.

var previousValue = "";
$("#my_select").on("focus",function(){
    previousValue = $(this).val();
});

$("#reset").on("click", function () {
   $("#my_select").val(previousValue);
});

Exemple de travail:http://jsfiddle.net/T8sCf/17/

1
Kevin Bowersox

Vous pouvez faire de cette façon:

var preval = $('#my_select').val(); // get the def value

$("#reset").on("click", function () {
   $('#my_select option[value*="' + preval + '"]').prop('selected', true);
});

checkout this violon

prenez une var qui contient la valeur chargée par défaut avant l'événement change, puis sélectionnez l'option avec le sélecteur d'attribut value avec la valeur var et définissez la propriété sur selected.

1
Jai

Si vous utilisez des formulaires Spring, vous devrez peut-être réinitialiser l’étiquette sélectionnée sur votre option. Vous définiriez votre formulaire: select id id sur une chaîne vide réinitialisera votre sélection avec l'étiquette comme valeur par défaut.

<form:select path="myBeanAttribute" id="my_select">
    <form:option value="" label="--Select One--"/>
    <form:options items="${mySelectionValueList}"/>
</form:select>

 $("#reset").on("click", function () {
        $("#my_select").val("");
 });

dans le cas où il y a un bouton de réinitialisation. Autrement

$("#my_select").val("");
1
rnyunja

Ce code va vous aider.

<html>
<head>
    <script type="text/JavaScript" src="jquery-2.0.2.min.js"></script>
    <script type="text/JavaScript">
        $(function(){
            var defaultValue = $("#my_select").val();
            $("#reset").click(function () {
                $("#my_select").val(defaultValue);
            });
        });
    </script>
</head>
<body>
    <select id="my_select">
        <option value="a">a</option>
        <option value="b" selected="selected">b</option>
        <option value="c">c</option>
    </select>
    <div id="reset">
        <input type="button" value="reset"/>
    </div>
</body>

1
Raghav

Pour ceux qui travaillent avec Bootstrap-select, vous pouvez utiliser ceci:

$('#mySelect').selectpicker('render');
1
KJS

Cela fonctionne pour moi:

$("#reset").on("click", function () {
    $("#my_select option[selected]").prop('selected', true);
}

Vous recherchez pour l'option par défaut qui a l'attribut select et modifiez la sélection en fonction de cette option.

0
Tomas Prado
$("#reset").on("click", function () {
    $('#my_select').val('-1');
});

http://jsfiddle.net/T8sCf/1323/

0
Sagar Sinha

J'essayais de le résoudre comme les autres réponses, malheureusement, je n'ai pas eu le moyen de le faire, une fois que j'ai essayé d'écrire ci-dessous:

$('#<%=ddID.ClientID %>').get(0).selectedIndex = 0;

ce code fonctionne pour moi, j'espère que cela vous sera utile.

Meilleures salutations.

Samuel Alvarado.

0
user7507113
$('#my_select').find('option:not(:first)').remove();

Appelez cette fonction à chaque fois avant de renseigner le select

0
joash

Réinitialiser tous les champs de sélection à l'option par défaut, où l'attribut sélectionné est défini.

$("#reset").on("click", function () {
    // Reset all selections fields to default option.
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
});
0
Sjoerd Linders