jquery를 사용하여 $ (document) .ready에서 드롭 다운의 변경 이벤트를 트리거하고 싶습니다.
사용자 세부 정보 페이지에 국가 및 주에 대한 계단식 드롭 다운이 있습니다. C #을 사용하여 MVC에서 국가 및 주에 대한 값 (사용자 ID를 기반으로 DB에서 가져옴)을 어떻게 설정할 수 있습니까?
답변
JQuery를 많이 모르지만이 구문으로 네이티브 이벤트를 실행할 수 있다고 들었습니다.
$(document).ready(function(){
$('#countrylist').change(function(e){
// Your event handler
});
// And now fire change event when the DOM is ready
$('#countrylist').trigger('change');
});
trigger () 또는 change ()를 호출하기 전에 변경 이벤트 핸들러를 선언해야합니다. 그렇지 않으면 실행되지 않습니다. @LenielMacaferi를 언급 해 주셔서 감사합니다.
자세한 정보는 여기 .
답변
이 시도:
$(document).ready(function(event) {
$('#countrylist').change(function(e){
// put code here
}).change();
});
변경 이벤트를 정의하고 즉시 트리거하십시오. 이렇게하면 이벤트 핸들러가 호출되기 전에 정의됩니다.
원래 포스터에 대한 답변에 늦을 수 있지만 다른 사람이 속기 표기법의 이점을 누릴 수 있으며 이는 jQuery의 연결 등을 따릅니다.
답변
이 시도:
$('#id').change();
나를 위해 작동합니다.
값 설정과 함께 한 줄에 :
$('#id').val(16).change();
답변
링크 된 드롭 다운을 사용하려는 경우이를 수행하는 가장 좋은 방법은 미리 빌드 된 선택 상자를 반환하는 스크립트와이를 요청하는 AJAX 호출을 사용하는 것입니다.
필요한 경우 jQuery의 Ajax 메서드에 대한 설명서가 있습니다.
$(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);
}
});
});
});
그런 다음 ID가 “stateBoxHook”인 상태 선택 상자 주위에 스팬을 두십시오.
답변
또는 드롭 다운 목록 자체에 onchange 속성을 넣을 수 있으며, 해당 onchange는 이와 같은 특정 jquery 함수를 호출합니다.
<input type="dropdownlist" onchange="jqueryFunc()">
<script type="text/javascript">
$(function(){
jqueryFunc(){
//something goes here
}
});
</script>
이 코드가 도움이되기를 바라며,이 코드는 어떤 IDE에서도 테스트되지 않은 초안 일 뿐이라는 점에 유의하십시오. 감사
답변
어떤 이유로 jQuery여기에 제공된 다른 솔루션은 콘솔에서 스크립트를 실행할 때 작동했지만 Chrome 북마크 에서 트리거되면 작동하지 않았습니다 .
다행히도이 Vanilla JS 솔루션 ( triggerChangeEvent기능)이 작동했습니다.
/**
* 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>답변
