it-swarm.com.de

Setzen Sie den Wert auf den Standardwert zurück

Ich habe eine Auswahlbox

<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>

Ich habe auch eine Reset-Taste, hier ist der Standardwert (ausgewählt) "b". Angenommen, ich wähle "c" aus und nachdem ich den Auswahlfeldwert auf den Standardwert zurückgesetzt habe, wie kann ich dies mit Jquery machen?

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

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

48
OTAR

Sie können die defaultSelected-Eigenschaft eines Optionselements verwenden :

Enthält den Anfangswert des selected-HTML-Attributs, der angibt, ob die Option standardmäßig ausgewählt ist oder nicht.

Die DOM-Schnittstelle verfolgt also bereits, welche Option ursprünglich ausgewählt wurde.

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

DEMO

Dies würde sogar für Multi-Select-Elemente funktionieren.

Wenn Sie nicht alle Optionen durchlaufen möchten, sondern nach dem Auffinden der ursprünglich ausgewählten Option "brechen", können Sie stattdessen .each verwenden:

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

Ohne 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;

Meiner Meinung nach ist der bessere Weg jedoch nur HTML (mit <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
웃웃웃웃웃

Sie können das data-Attribut des select-Elements verwenden

<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>

Ihr JavaScript,

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

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

UPDATE


Wenn Sie die Standardauswahl nicht kennen und wenn Sie die HTML-Datei nicht aktualisieren können,

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

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

6

Verwenden Sie eine einfache JavaScript-Funktion und rufen Sie sie bei einem Onclick-Ereignis auf.

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

Eine nette saubere Möglichkeit ist, dem select ein data-default-Attribut hinzuzufügen

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

Und dann ist der Code wirklich einfach:

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

Live-Beispiel: http://jsfiddle.net/T8sCf/7/

3
Jamiec

Sie können auch die Werte mehrerer SELECTs zurücksetzen und dann die Schaltfläche zum Senden auslösen.

Bitte sehen Sie es hier in Aktion:

Live Beispiel:

$(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
<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>

$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});

Dies ist ein einfacher Weg für Ihre Frage. nur eine Zeilenantwort.

2
Ajit Kumar

Mit jquery:

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

Ein einfacher Weg, der läuft, ist

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

Binden Sie einen Ereignishandler an das Fokusereignis von select, um den vorherigen Wert zu erfassen. Setzen Sie dann den Wert der select auf den vorherigen Wert, wenn Sie auf reset klicken.

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

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

Arbeitsbeispiel:http://jsfiddle.net/T8sCf/17/

1
Kevin Bowersox

Sie können diesen Weg machen:

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

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

checkout diese Geige

nehmen Sie ein var, das vor dem Änderungsereignis den standardmäßig geladenen Wert enthält. Rufen Sie dann die Option mit dem Attributselektor von value auf, wobei der Wert var die Eigenschaft auf select setzt.

1
Jai

Bei der Verwendung von Spring-Formularen müssen Sie das ausgewählte Etikett möglicherweise auf das Optionslabel zurücksetzen. Sie würden Ihr Formular festlegen: select ID-Wert auf eine leere Zeichenfolge setzt Ihre Auswahl als Standard auf das Label zurück.

<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("");
 });

in dem Fall, wo es eine Reset-Taste gibt. Andernfalls

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

Dieser Code wird Ihnen helfen.

<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

Für diejenigen, die mit Bootstrap-select arbeiten, können Sie Folgendes verwenden:

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

Das funktioniert für mich:

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

Sie suchen nach der Standardoption, die das Attribut select enthält, und Sie ändern die Auswahl in diese Option.

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

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

0
Sagar Sinha

Ich habe versucht, es wie die anderen Antworten zu lösen. Leider hatte ich keinen richtigen Weg, es zu tun, nachdem ich es beim Schreiben versucht hatte:

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

dieser Code funktioniert für mich, ich hoffe, das wird für euch nützlich sein.

Freundliche Grüße.

Samuel Alvarado.

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

Rufen Sie diese Funktion jedes Mal auf, bevor Sie select ausfüllen.

0
joash

Setzen Sie alle Auswahlfelder auf die Standardoption zurück, in der das ausgewählte Attribut definiert ist.

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