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


132

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

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

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

또는

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

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

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

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

또는

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

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


순수 자바 스크립트 element.addEventListener?
Manuel Bitto

4
$ ( 'select # some'). val (10) .change (); 사용자에게는 거의 즉각적입니다.
Dimitri

@Manuel 나는 그것을 시도했다. iv'e 사용 object.change = function (.... 및 object.addEventListener (...하지만 object.value, $ (object) .val () 및 $ (object) .attr ( 'value')) 그 목록을 트리거합니다
Goran Radulovic

답변:


124

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

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

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

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

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


이것이 바로 내가 필요한 것입니다. DOM 이벤트 핸들러를 동적으로 트리거하는 방법을 발견하는 가장 좋은 방법은 무엇입니까? jQuery가 이것을 잘 문서화합니까? 감사합니다!
Con Antonakos

2
$ ( "# discount_type") .val (2) .trigger ( 'change');
Satanand Tiwari

$ ( '# add_itp_spt_parent_id'). val (add_fpt_val) .trigger ( 'change'); $ ( '# add_itp_spt_parent_id'). change (); 두 솔루션 모두 작동하지 않습니다.
Kamlesh

정의 변경 기능을 사용하기 전에 내 문제를 해결했습니다. 감사.
Kamlesh

45

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

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

사용하기 전에 정의

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

또는

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

4
오래된 게시물이지만 이것이 내 문제를 해결하고 바람이 부는 긴 뇌 균열에서 나를 구해 냈습니다 ... 사용하기 전에 청취자를 정의해야합니다. 순수한 JavaScript에서도.
Temitayo

조금 더 자세히 설명해 주시겠습니까? 이 때문에 "change ()"가 없습니까?
Dima R.

글쎄, 아마도 이런 종류의 리스너는로드시 게양되지 않았다고 말할 것입니다. 프로젝트 change()에서 리스너를 정의하기 전에를 change()호출했는데 리스너 아래에서 호출을 이동하고 작동 할 때까지 작동하지 않았습니다 . 글쎄, 이것이 문제가되지 않아야한다고 말할 것입니다. 코드를 구성하는 방식의 문제 일뿐입니다.
Temitayo

1
이것이 내가 필요한 것입니다. 이 문제를 해결하기 위해 영원히 감사했습니다.
Jamie M.

브라보!!! "사용하기 전에 정의 된 변경 기능"이 내 문제를 해결했습니다. 고마워, 여보.
Kamlesh

17

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

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

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

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

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


이 질문에 대한 여러 포럼을 읽었으며 귀하의 답변은 내가 찾던 마지막 완성이었습니다. 추적이라는 아이디어는 정신 실험으로 만 작동하며 분명히 비실용적이지만 설명이 가능합니다. 래퍼의 아이디어는 대단합니다. "return this"부분을 지적 해 주셔서 감사합니다. 문안 인사.
David L

$('select').val(value).change()항상 작동 하지 않습니까? 명확한 설명이 있습니까?
Istiaque Ahmed

2

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

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

2

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

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

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.