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.