[jquery] val () 함수를 사용하여 <select> 값을 설정할 때 change () 이벤트 트리거

Program / 글쓴이

select 요소 의 값을 설정할 때 변경 이벤트 를 트리거하는 가장 쉽고 가장 좋은 방법은 무엇입니까?

다음 코드를 실행할 것으로 예상했습니다.

$('select#some').val(10);

또는

$('select#some').attr('value',  10);

변경 이벤트를 트리거하는 결과가 발생합니다. 이것은 꽤 논리적 인 일이라고 생각합니다. 권리?

글쎄, 그렇지 않다. 이를 수행하여 change () 이벤트를 심사해야합니다.

$('select#some').val(10).change();

또는

$('select#some').val(10).trigger('change');

하지만 select의 값이 일부 자바 스크립트 코드에 의해 변경되는 즉시 변경 이벤트를 트리거하는 솔루션을 찾고 있습니다.

답변

나는 비슷한 문제가 있었고 제안 된 코드가 훌륭하게 작동했기 때문에 문제가 무엇인지 잘 모르겠습니다. 그것은 바로 (당신의 요구 사항)을 다음과 같이 변경 코드를 트리거합니다.

$('#selectField').change(function(){
    if($('#selectField').val() == 'N'){
        $('#secondaryInput').hide();
    } else {
        $('#secondaryInput').show();
}
});

그런 다음 데이터베이스에서 값을 가져옵니다 (새 입력 및 기존 레코드 편집을위한 양식에 사용됨). 선택한 값으로 설정하고 누락 된 부분을 추가하여 위 코드 “.change () 를 트리거합니다. “.

$('#selectField').val(valueFromDatabase).change();

따라서 데이터베이스의 기존 값이 ‘N’이면 즉시 보조 양식을 내 양식에서 숨 깁니다.

답변

내가 알아 낸 한 가지는 (어려운 방법), 

$('#selectField').change(function(){
  // some content ...
});

사용하기 전에 정의 

$('#selectField').val(10).trigger('change');

또는

 $('#selectField').val(10).change();

답변

정답은 이미 중복 질문입니다. val ()을 사용하여 select 값을 설정할 때 jquery 변경 이벤트가 트리거되지 않는 이유는 무엇입니까?

선택 값을 설정해도 change () 이벤트가 트리거되지는 않지만 요소 값이 JS를 통해 변경되었을 때 발생하는 이벤트를 찾으려면 이벤트가 없습니다.

정말로 이것을하고 싶다면 유일한 방법은 간격에서 DOM을 확인하고 변경된 값을 추적하는 함수를 작성하는 것입니다.

이 솔루션을 추가했습니다.
또 다른 가능한 해결책은 자체 .val()래퍼 함수 를 만들고 값을 통해 값을 설정 한 후 사용자 정의 이벤트를 트리거 한 .val()다음 .val () 래퍼를 사용하여 값을 설정하면 <select>사용자 정의 이벤트가 트리거 되는 것입니다 트랩하고 처리 할 수 ​​있습니다.

확인하는 return this것이 jQuery를 방식으로 체인 가능하므로,

답변

나는 그것을 분리 한 다음 신원 비교를 사용하여 다음에 무엇을하는지 지시합니다. 

$("#selectField").change(function(){
  if(this.value === 'textValue1'){ $(".contentClass1").fadeIn(); }
  if(this.value === 'textValue2'){ $(".contentclass2").fadeIn(); }
});

답변

jQuery는 기본 변경 이벤트를 트리거하지 않고 자체 변경 이벤트 만 트리거합니다. jQuery없이 이벤트를 바인딩 한 다음 jQuery를 사용하여 이벤트를 트리거하면 바인딩 된 콜백이 실행되지 않습니다!

솔루션은 다음과 같습니다 (100 % 작동).

var sortBySelect = document.querySelector("select.your-class");
sortBySelect.value = "new value";
sortBySelect.dispatchEvent(new Event("change"));

답변