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

Program / 글쓴이

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

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

});

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

답변

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

답변

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();
   });

답변

위임 된 대안

누구든지 자신의 리스너에 위임 된 접근 방식 을 사용하는 경우 사용하십시오 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 데모

답변

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

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

답변

<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값을 변경할 때 현재 선택된 값을 얻을 수 있습니다 .

답변

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

답변

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

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