Wyzwalanie zdarzenia zmiany <select> przy użyciu jquery

145

czy mimo to mógłbym wywołać zdarzenie zmiany przy zaznaczaniu pola podczas ładowania strony i wybrać konkretną opcję.

Również funkcja wykonywana przez dodanie wyzwalacza po powiązaniu funkcji ze zdarzeniem.

Starałem się wyjścia coś jak to

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/

kishanio
źródło
czy chcesz ustawić konkretną opcję podczas ładowania? lub chcesz wywołać zdarzenie zmiany?
Manse
Czy mógłbyś rozwinąć ostateczne rozwiązanie. Czy chcesz, aby opcja była wymuszana podczas wczytywania strony, czy też chcesz wybrać inną opcję, gdy wybrano coś konkretnego?
Matthew Riches
cześć, dziękuję za twoją opinię, udało mi się rozwiązać problem i udokumentowałem go.
kishanio

Odpowiedzi:

287

Służy val()do zmiany wartości (nie tekstu) i trigger()ręcznego uruchamiania zdarzenia.

Procedura obsługi zdarzenia zmiany musi zostać zadeklarowana przed wyzwalaczem.

Oto próbka

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');
Józefa
źródło
Również po zmianie opcji chciałem wykonać funkcję zdarzenia zmiany. wrt this . okno alertu powinno zostać wykonane.
kishanio
@KishanThobhani powinieneś wywołać to po dodaniu handlera. zobacz próbkę.
Joseph
7
Ważną częścią tego rozwiązania jest: Procedura obsługi zdarzenia zmiany MUSI zostać zadeklarowana PRZED wyzwalaczem (ma to sens ...), w moim przypadku to był problem, dzięki!
Larzan
Pomogło jako Zbawiciel, dziękuję @Joseph
Divya
Zdefiniowana funkcja zmiany przed użyciem rozwiązała mój problem. Dzięki.
Kamlesh
27

Aby wybrać opcję, użyj .val('value-of-the-option')na wybranym elemencie. Aby wywołać element zmiany, użyj .change()lub .trigger('change').

Problemy w twoim kodzie to przecinek zamiast kropki $('.check'),trigger('change');i fakt, że wywołujesz go przed powiązaniem procedury obsługi zdarzeń.

ThiefMaster
źródło
10
$('#edit_user_details').find('select').trigger('change');

Byłoby to zmienić wybierz tag HTML pozycję z rozwijanego id="edit_user_details".

Sohail xIN3N
źródło
6

Kolejne działające rozwiązanie dla tych, którzy zostali zablokowani przez obsługę wyzwalacza jQuery, że dosent fire na natywnych zdarzeniach będzie jak poniżej (100% działa):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));
Mohamed23gharbi
źródło
1
Wypróbowałem wszystkie powyższe, ale tylko ten działa dla mnie. Myślę, ponieważ mój wybór był w środku vue. Dzięki @ Mohamed23gharbi!
Tillito
1
To samo tutaj. To jest rozwiązanie, którego szukałem od godziny. Dzięki.
mberna
1
To musi być odpowiedź!
MARS
1

Podaj linki w wartości tagu opcji

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>
Afraz Ahmad
źródło
1

Jeśli chcesz sprawdzić, użyj tej metody

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>
Afraz Ahmad
źródło
0

Na podstawie odpowiedzi Mohamed23gharbi:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

W moim przypadku, gdzie elementy zostały stworzone przez vue, jest to jedyny sposób, który działa.

Tillito
źródło
0

Możesz wypróbować poniższy kod, aby rozwiązać problem:

Domyślnie pierwsza opcja select: jQuery ('. Select'). Find ('opcja') [0] .selected = true;

Dzięki, Ketan T.

Ketan Tambekar
źródło