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/


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');

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


10
$('#edit_user_details').find('select').trigger('change');

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


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

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>

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>

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.


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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.