Soru Seçilen değeri varsayılana sıfırla


Seçme kutum var

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

Ben de sıfırlama düğmesine var, burada varsayılan (seçili) değer "b", "c" yi seçtiğimi ve varsayılan olarak yeniden varsayılan kutu seçme değerine ihtiyaç duyduktan sonra jquery'yi nasıl kullanacağım?

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

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


44
2018-06-04 08:30


Menşei


Tüm formu sıfırlamak isterseniz, yerleşik JavaScript’i aramanız yeterlidir. .reset() üzerinde <form> öğesi. - andyb
olası kopyası seçme elemanını sıfırla - andyb
Ayrıca <select> bir var defaultSelected tek bir elemanın sıfırlanmasını istiyorsanız sıfırlamak için fonksiyonda kullanılabilir - bkz. stackoverflow.com/questions/2348042/... - andyb
@andyb İlk öğe zorunlu olarak varsayılan değer değil - BrunoLM
@BrunoLM evet ben sizin dikkatinizi çekerim. Diğer soruya çok benzer olduğu için başvurdum çünkü "JavaScript ile varsayılan değere bir seçim değeri sıfırla" - andyb


Cevaplar:


Kullanabilirsiniz defaultSelected bir seçenek öğesinin özelliği:

Başlangıç ​​değerini içerir. selected Seçeneğin varsayılan olarak seçilip seçilmediğini belirten HTML özelliği.

Yani, DOM arayüzü zaten hangi seçeneğin seçildiğini takip ediyor.

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

DEMO

Bu çok seçimli elemanlar için bile çalışır.

Tüm seçenekler üzerinde yineleme yapmak istemiyorsanız, ancak orijinali seçtikten sonra "kırın" seçeneğini kullanabilirsiniz. .each yerine:

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

JQuery olmadan:

var options = document.querySelectorAll('#my_select option');
for (var i = 0, l = options.length; i < l; i++) {
    options[i].selected = options[i].defaultSelected;
}

61
2018-06-04 08:38



varsayılan seçenek öğenizi defaultSelected özniteliği ve bunun gibi sıfırla $('#select option').removeAttr('selected'); - user3752919


$("#reset").on("click", function () {
    $("#my_select").val('b');//Setting the value as 'b'
});

13
2018-06-04 08:32



Seçme kutusundaki varsayılan değerin ne olduğunu bilmiyorum - RIKI
@OTARIKI - önceden ne olduğunu bilmiyorsanız, hangi seçeneği eklemeniz gerektiğini nasıl biliyorsunuz? selected="selected" özniteliği ?! - Jamiec
@Jamiec: Muhtemelen sunucu tarafında üretilen kod. - Felix Kling
Evet, sunucu tarafında hala varsayılanı bilen istemci tarafı kodu oluşturabilirsiniz! - Jamiec
sıfırlama değil, ayarını düşünüyorum. - Jai


$('#my_select').get(0).selectedIndex = 1;

Ancak, bence, daha iyi bir yol sadece HTML kullanıyor <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>

12
2018-06-04 08:32



Kullanmak için herhangi bir sebep get(0) ile ID Seçici? - Chamika Sandamal
@ChamikaSandamal Hayır, sadece hızlı yazarak.
@ChamikaSandamal .get(0) DOM öğesini elde etmek için kullanılır; .selectedIndex - billyonecan


Neden basit bir javascript işlevi kullanmıyor ve onclick etkinliğinde arama yapmıyorsunuz?

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

6
2017-07-15 22:39





Kullanabilirsiniz data özniteliği select eleman

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

JavaScript’iniz

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

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

GÜNCELLEŞTİRME


Varsayılan seçimi bilmiyorsanız ve html'yi güncelleyemiyorsanız, dom koduna aşağıdaki kodu ekleyin,

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

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


5
2018-06-04 08:34





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

3
2018-06-04 08:32



Çalışmıyor çünkü seçili 'b' ikinci konumda bulunuyor - Oleksii Aza


Bir güzel temiz yol eklemek data-default seçime ait özellik

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

Bir sonra kod gerçekten basit:

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

Canlı örnek: http://jsfiddle.net/T8sCf/7/


3
2018-06-04 08:33