jquery select 옵션 클릭 처리기

jquery select 옵션 클릭 처리기

주어진:

<select id="mySelect">
  <option>..</option>
  ...
</select>

선택 ID를 사용하여 옵션 중 하나에서 클릭 이벤트를 트리거하려면 어떻게 해야 합니까?이벤트를 선택 항목에 직접 연결하려고 했지만 선택 항목을 클릭할 때마다 이벤트가 트리거됩니다(옵션이 없더라도).아, 그리고 그것은 다중 선택입니다 (그것은 중요하지 않다고 생각하지만).

이벤트 핸들러를 '클릭' 대신 '변경'하려고 합니다.

$('#mySelect').change(function(){ 
    var value = $(this).val();
});

$('#mySelect').on('change', function() {
  var value = $(this).val();
  alert(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<select id="mySelect">
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
  <option value='5'>5</option>
  <option value='6'>6</option>
  <option value='7'>7</option>
  <option value='8'>8</option>
</select>

---

예

선택할 포커스 이벤트를 첨부할 수 있습니다.

$('#select_id').focus(function() {
    console.log('Handler for .focus() called.');
});

내가 가지고 있던 문제는change핸들러는 그것이 내가 위아래로 스크롤하는 모든 키 누름에서 트리거되었다는 것입니다.<select>.

옵션을 클릭할 때마다 또는 이벤트를 받고 싶었습니다.enter원하는 옵션을 눌렀습니다.이렇게 하게 됐습니다.

let blockChange = false;

$element.keydown(function (e) {

    const keycode = (e.keyCode ? e.keyCode : e.which);

    // prevents select opening when enter is pressed
    if (keycode === 13) {
        e.preventDefault();
    }

    // lets the change event know that these keypresses are to be ignored
    if([38, 40].indexOf(keycode) > -1){
        blockChange = true;
    }

});

$element.keyup(function(e) {

    const keycode = (e.keyCode ? e.keyCode : e.which);
    // handle enter press
    if(keycode === 13) {
        doSomething();
    }

});

$element.change(function(e) {

    // this effective handles the click only as preventDefault was used on enter
    if(!blockChange) {
        doSomething();
    }
    blockChange = false;

});

이전의 선택 값과 클릭된 값을 가져오려면 이 방법을 사용할 수도 있습니다.

HTML

<select name="status">
    <option value="confirmed">confirmed</option>
    <option value="packed">packed</option>
    <option value="shiped">shiped</option>
    <option value="delivered">delivered</option>
</select>

대본

    var previous;

    $("select[name=status]").focus(function () {
        previous = this.value;
    }).change(function() {
        var next = $(this).val()
        
        alert("previous: "+previous+ " and Next: "+ next)
        
        previous = this.value;
    });

    <select name="data" id = 'cohort' class="form-control" style = "width:215px; margin-left:20px; margin-bottom:8px ; height:30px" >
    <option value = 0>All</option>
    <option value = 1>Diseases</option>
    <option value = 2>Drugs</option>
    <option value = 3>Procedures</option>
    </select>

const element = document.getElementById("cohort");
const event = new MouseEvent("mousedown");
element.dispatchEvent(event);

이 상황에서 수행한 작업은 OnClick 이벤트에 다음과 같은 옵션 요소를 넣었습니다.

<option onClick="something();">Option Name</option>

그러면 다음과 같은 스크립트 기능을 생성합니다.

function something(){
    alert("Hello"); 
    }

업데이트: 안타깝게도 댓글을 달 수 없어서 여기서 업데이트합니다.
TrueBlueAussie 분명히 jsfiddle에 문제가 있습니다. 작동하는지 여부는 여기에서 확인하십시오. http://js.do/code/klm

그것은 나에게 통합니다.

<select name="" id="select">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</select>

<script>
    $("#select > option").on("click", function () {
       alert(1)
    })
</script>

한 가지 가능한 해결책은 모든 옵션에 클래스를 추가하는 것입니다.

<select name="export_type" id="export_type">
    <option class="export_option" value="pdf">PDF</option>
    <option class="export_option" value="xlsx">Excel</option>
    <option class="export_option" value="docx">DocX</option>
</select>

그런 다음 클릭 핸들러를 이 클래스에 사용합니다.

$(document).ready(function () {

    $(".export_option").click(function (e) {
        //alert('click');
    });

});

업데이트: 코드는 FF, IE, 오페라에서는 작동하지만 크롬에서는 작동하지 않는 것으로 보입니다.사양을 보면 http://www.w3.org/TR/html401/interact/forms.html#h-17.6 크롬의 버그라고 할 수 있습니다.

언급URL : https://stackoverflow.com/questions/5749597/jquery-select-option-click-handler