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 #.
Odpowiedzi:
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 .
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! :)
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.
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”
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
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>