jquery 선택 변경 이벤트 가져 오기 옵션

234

select 요소의 change 이벤트에 이벤트를 다음과 같이 바인딩했습니다.

$('select').on('change', '', function (e) {

});

변경 이벤트가 발생할 때 선택된 요소에 어떻게 액세스 할 수 있습니까?

jquery events

— 줄라 키스
소스

1

왜 그렇게 말합니까?

— Miguel

3

@ superuberduper 나는 가능한 한 jquery를 피했지만 저항은 쓸모가 없습니다. 동화 된 후에는 기분이 훨씬 좋아질 것입니다.

— adg

lolol @adg 너무 좋아!

— SuperUberDuper

460

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

— Naftali 일명 Neal
소스

8

$ ( "selector", this) 구문은 무엇을 의미합니까? 나는 일반적인 아이디어를 가지고 있지만 완전히 확신하지 못한다

— JoshWillik

14

@JoshWillik와 함께 컨텍스트의 $("selector", this)모든 selector요소를 찾습니다 this. 글쓰기 $("selector", this)는 거의 같습니다 $(this).find('selector')

— Bellash

8

@JoshWillik : $()의 별칭이므로 jQuery()여기에서 설명서를 찾을 수 있습니다. api.jquery.com/jQuery 서명은 분명히 jQuery( selector [, context ] )있습니다. @Bellash : "거의 같다"면 차이점은 무엇입니까? 또는 더 빠른 것은 무엇입니까? 나는 .find()이것이 더 많은 OO IMO이기 때문에 선호합니다 ...

— Adrian Föder

7

다중 선택의 경우 어떻게 확인합니까?

— Hemant_Negi

3

@ AdrianFöder 당신과 그것을 찾고 다른 사람들을 위해, .find()이 대답에 따라 10 % 빠른 : stackoverflow.com/a/9046288/2767703

— 케빈 반 Mierlo

75

jQuery find 메소드를 사용할 수 있습니다

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

위의 솔루션은 완벽하게 작동하지만 클릭 한 옵션을 기꺼이 얻을 수 있도록 다음 코드를 추가하도록 선택합니다. 이 선택 값이 변경되지 않은 경우에도 선택한 옵션을 얻을 수 있습니다. (Mozilla에서만 테스트)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });

— 벨라 쉬
소스

option이벤트에 바인딩하는 것은 특히 모바일 장치에서 위험한 제안입니다. 예를 들어, Webkit은이 이벤트를 올바르게 지원하지 않습니다. bugs.chromium.org/p/chromium/issues/detail?id=5284

— Ian Kemp

그래요 좋아요! 내가 말했듯이, 두 번째 솔루션은 많은 브라우저에서 지원되지 않습니다!

— Bellash

15

위임 된 대안

누구든지 자신의 리스너에 위임 된 접근 방식 을 사용하는 경우 사용하십시오 e.target(select 요소를 참조 함).

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

JSFiddle 데모

— 다니엘
소스

+1 이것은 내가 원하는 것이므로 로컬에서 시도했을 때 작동하지 않습니다 .jsfiddle에서만 작동, CDN을 추가해야합니까?

— AVI

6

나는 더 짧고 깨끗하다고 생각합니다. 또한 선택된 항목이 두 개 이상인 경우 반복 할 수 있습니다.

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

— 1.44mb
소스

selectedOptions일부 브라우저에서는 사용할 수 없습니다.

— Bernhard Döbler

@ BernhardDöbler 어느 쪽입니까? 어떤 소스?

— 1.44mb

1

IE 11에 코드를 복사했는데 오류가 발생했습니다. 나는로 끝났다 this.options[ this.options.selectedIndex ]. 모질라 는 26 세의 파이어 폭스에서 지원한다고 밝혔다.

— Bernhard Döbler

6

<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

먼저을 만듭니다 select option. 그 후 jquery사용자가 select option값을 변경할 때 현재 선택된 값을 얻을 수 있습니다 .

1

답변에 대한 자세한 설명을 공유 할 수 있습니까?

— Mostafiz

@MostafizurRahman 내 코드는 매우 쉬워서 코드 만 작성했습니다.

3

$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});

— 세 다르 카라 카
소스

2

선택된 가치의 가치를 얻는 또 다른 짧은 방법

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});

— 레셉 캔
소스

이 경우 "var selectedVal = $ ("# selectElement "). val ()"이 작동하지 않는 이유

— LuisE

선택 요소에서 생성 된 변경 이벤트가 발생하면 값을 가져옵니다. 원하는 경우 선택 변경시 값이 업데이트되지 않습니다.

— Recep 수

0

공식 API 설명서 참조 https://api.jquery.com/selected-selector/

이 좋은 작품 :

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

과

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

독특한 선택을 쉽게 할 수 있습니다

var SelVal = $( "#idSelect option:selected" ).val();

— 알렉스 루소
소스

0

이 jquery select change 이벤트를 사용하여 선택된 옵션 값 가져 오기

데모 용

$(document).ready(function () {   
    $('body').on('change','#select', function() {
         $('#show_selected').val(this.value);
    });
});

<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>  
<body>  
<select id="select">
 <option value="">Select One</option>
    <option value="PHP">PHP</option>
    <option value="jAVA">JAVA</option>
    <option value="Jquery">jQuery</option>
    <option value="Python">Python</option>
    <option value="Mysql">Mysql</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>

스 니펫 확장

— 개발자
소스