드롭다운의 트리거 변경 이벤트

드롭다운의 트리거 변경 이벤트

$(문서) 드롭다운의 변경 이벤트를 트리거하고 싶습니다.jquery를 사용하여 준비되었습니다.

사용자 세부 정보 페이지에 국가 및 주에 대한 계단식 드롭다운이 있습니다.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');
});

트리거() 또는 변경()을 호출하기 전에 변경 이벤트 처리기를 선언해야 합니다. 그렇지 않으면 실행되지 않습니다.@Leniel Macaferi를 언급해 주셔서 감사합니다.

자세한 내용은 여기를 참조하십시오.

사용해 보십시오.

$(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"인 상태 선택 상자 주위에 범위를 지정합니다.

또는 드롭다운 목록 자체에 변경 속성을 추가하여 변경 시 이와 같은 특정 jquery 함수를 호출할 수 있습니다.

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

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

이것이 당신에게 도움이 되기를 바라며, 이 코드는 단지 대략적인 초안일 뿐, 어떤 아이디어에서도 테스트되지 않았다는 점에 유의하십시오.감사해요.

어떤 이유에서인지, 다른 하나는jQuery여기에 제공된 솔루션은 콘솔에서 스크립트를 실행할 때 작동했지만 Chrome Bookmarklet에서 트리거할 때는 작동하지 않았습니다.

운 좋게도, 이 바닐라 JS 솔루션은.triggerChangeEventfunction)이 작동했습니다.

/**
  * Trigger a `change` event on given drop down option element.
  * WARNING: only works if not already selected.
  * @see https://stackoverflow.com/questions/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>

언급URL : https://stackoverflow.com/questions/902212/trigger-change-event-of-dropdown