Wyzwalanie zdarzenia zmiany listy rozwijanej


86

Chcę wywołać zdarzenie zmiany listy rozwijanej w $ (dokument). Już przy użyciu jquery.

Mam kaskadowe menu z krajami i stanami na stronie szczegółów użytkownika. jak mogę ustawić wartość (która jest pobierana z bazy danych na podstawie identyfikatora użytkownika) dla kraju i stanu w MVC z C #.


Możesz umieścić więcej tagów, takich jak javascript i jQuery, aby znaleźć więcej
xenon

Odpowiedzi:


185

Nie znam zbyt wiele JQuery, ale słyszałem, że pozwala na uruchamianie natywnych zdarzeń przy użyciu tej składni.

$(document).ready(function(){

    $('#countrylist').change(function(e){
       // Your event handler
    });

    // And now fire change event when the DOM is ready
    $('#countrylist').trigger('change');
});

Musisz zadeklarować procedurę obsługi zdarzenia change przed wywołaniem funkcji trigger () lub change (), w przeciwnym razie nie zostanie ona uruchomiona. Dzięki za wzmiankę @LenielMacaferi.

Więcej informacji tutaj .


13
Musisz zadeklarować procedurę obsługi zdarzenia zmiany przed wywołaniem trigger()lub nawet change()tak, jak jest to poprawnie pokazane w tej odpowiedzi, to znaczy, jeśli kod obsługi zdarzenia pojawi się poniżej wywołania, nic się nie dzieje! :)
Leniel Maccaferri

3
@LenielMacaferi Dziękuję za uratowanie mi godziny lub dwóch.
Frank Nocke

@Christophe Eblé & Leniel Macaferi, wielkie dzięki. Christophe, czy mógłbyś dodać komentarz Leniel do swojej odpowiedzi?
Zaxter

Użyłem .change (), ale bez powodzenia z jquery 3.1.1, Po tym poście uruchamia się zgodnie z oczekiwaniami.
Sorangwala Abbasali

To po prostu kończy się nieskończoną pętlą, a rozwiązanie każdego z nich kończy się zapętleniem.
Nathan McKaskle

12

Spróbuj tego:

$(document).ready(function(event) {
    $('#countrylist').change(function(e){
         // put code here
     }).change();
});

Zdefiniuj zdarzenie zmiany i uruchom je natychmiast. Dzięki temu program obsługi zdarzeń jest zdefiniowany przed jego wywołaniem.

Może się spóźnić, aby odpowiedzieć na oryginalny plakat, ale ktoś inny może skorzystać na zapisie skróconym, a to jest zgodne z łączeniem jQuery itp.

tworzenie łańcuchów jQuery


7

Spróbuj tego:

$('#id').change();

Pracuje dla mnie.

W jednej linii wraz z ustawieniem wartości: $('#id').val(16).change();


3
$ ('# id'). val (16) .change (); zrobił to dla mnie.
TomoMiha

1
Dzięki, @TomoMiha. Dodałem to w odpowiedzi.
d.popov

2

Jeśli próbujesz mieć połączone listy rozwijane, najlepszym sposobem na to jest posiadanie skryptu, który zwraca gotowe pole wyboru i wywołanie AJAX, które tego żąda.

Oto dokumentacja metody Ajax jQuery, jeśli jej potrzebujesz.

$(document).ready(function(){

    $('#countrylist').change(function(e){
        $this = $(e.target);
        $.ajax({
            type: "POST",
            url: "scriptname.asp", // Don't know asp/asp.net at all so you will have to do this bit
            data: { country: $this.val() },
            success:function(data){
                $('#stateBoxHook').html(data);
            }
        });
    });

});

Następnie ustaw zakres wokół pola wyboru stanu z identyfikatorem „stateBoxHook”


Mam kaskadowe listy rozwijane: <% = Html.DropDownList ("MyCountries", "--- Select Country ---")%> <% = Html.CascadingDropDownList ("MyStates", "MyCountries")%> Mogę ustawić wartość MyCountries as $ ("# MyCountries"). val ('<% = Model.CountryId%>'); w $ (document) .ready. Ale nie jestem w stanie ustawić wartości stanu, ponieważ pokazuje ona tylko jedną opcję „Wybierz stan”, która powinna być wypełniona na zdarzeniu zmiany kraju, ponieważ są one kaskadowo rozwijane. To jest rzeczywisty problem.
Prasad

Nadal nie jestem pewien, czego szukasz. Czy próbujesz stworzyć system, w którym wybierają państwo i zawężają listę do stanów w tym kraju? W takim przypadku będziesz musiał wykonać połączenie AJAX z serwerem i wysłać z wybranego kraju, a następnie odesłać listę stanów w tym kraju.
ksenon

Ustawiłem Stany Zjednoczone jako Kraj i Alabama jako Stan, co jest rozwijanym menu rozwijanym podczas dodawania profilu użytkownika. A kiedy wrócę na tę stronę, aby edytować pole, potrzebuję, aby kraj i stan zostały wypełnione wartościami, które ustawiłem wcześniej. Nie mam problemu z dodaniem profilu użytkownika, kiedy wracam na stronę do edycji, mogę ustawić wartość dla listy rozwijanej Kraj, a na liście rozwijanej stanu wartości nie są wypełnione, ponieważ są kaskadowe, które wypełniają się wartością kraju zmień wydarzenie. W tym celu muszę wyzwolić zdarzenie zmiany kraju, aby stan został wypełniony i mogę ustawić stan
Prasad

Dlaczego tak się dzieje? Wiesz, jaki kraj jest w momencie wczytywania strony, więc możesz wyrenderować właściwą listę wybranych stanów z wybranym stanem. Po zmianie kraju lista i tak zostanie ponownie załadowana.
ksenon

1

alternatywnie możesz umieścić atrybut onchange na samej liście rozwijanej, który będzie wywoływał określoną funkcję jquery w ten sposób.

<input type="dropdownlist" onchange="jqueryFunc()">

<script type="text/javascript">
$(function(){
    jqueryFunc(){
        //something goes here
    }
});
</script>

mam nadzieję, że ten pomoże ci i pamiętaj, że ten kod jest tylko wstępną wersją roboczą, nie testowany na żadnym IDE. dzięki


To nie wywołuje zdarzenia zmiany, gdy strona ładuje się po raz pierwszy (zgodnie z pytaniem OP)

0

Z jakiegoś powodu inne jQueryprzedstawione tutaj rozwiązania działały podczas uruchamiania skryptu z konsoli, jednak nie działały u mnie po uruchomieniu z Chrome Bookmarklets .

Na szczęście to rozwiązanie Vanilla JS ( triggerChangeEventfunkcja) zadziałało:

/**
  * Trigger a `change` event on given drop down option element.
  * WARNING: only works if not already selected.
  * @see /programming/902212/trigger-change-event-of-dropdown/58579258#58579258
  */
function triggerChangeEvent(option) {
  // set selected property
  option.selected = true;
  
  // raise event on parent <select> element
  if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    option.parentNode.dispatchEvent(evt);
  }
  else {
    option.parentNode.fireEvent("onchange");
  }
}

// ################################################
// Setup our test case
// ################################################

(function setup() {
  const sel = document.querySelector('#fruit');
  sel.onchange = () => {
    document.querySelector('#result').textContent = sel.value;
  };
})();

function runTest() {
  const sel = document.querySelector('#selector').value;
  const optionEl = document.querySelector(sel);
  triggerChangeEvent(optionEl);
}
<select id="fruit">
  <option value="">(select a fruit)</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="pineapple">Pineapple</option>
</select>

<p>
  You have selected: <b id="result"></b>
</p>
<p>
  <input id="selector" placeholder="selector" value="option[value='banana']">
  <button onclick="runTest()">Trigger select!</button>
</p>

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.