HTML <select>에 대해 onSelect 이벤트 또는 이와 동등한 이벤트가 있습니까?

여러 옵션 중에서 선택할 수있는 입력 양식이 있으며 사용자 가 선택을 변경할 때 무언가를 수행합니다 . 예 :

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

이제 doSomething()선택이 변경 될 때만 트리거됩니다 .

나는 트리거하려는 doSomething()사용자가 어떤 옵션을 가능하게 선택하면 같은 또 하나.

"onClick"핸들러를 사용해 보았지만 사용자가 선택 프로세스를 시작하기 전에 트리거됩니다.

따라서 사용자가 선택할 때마다 기능을 트리거하는 방법이 있습니까?

최신 정보:

Darryl이 제안한 답변은 효과가있는 것처럼 보이지만 일관되게 작동하지는 않습니다. 때때로 사용자가 선택 프로세스를 마치기 전에 드롭 다운 메뉴를 클릭하자마자 이벤트가 트리거됩니다!

가장 간단한 방법은 다음과 같습니다.

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

선택에 초점을 맞춘 마우스 선택 및 키보드 위 / 아래 키와 함께 작동합니다.

나는 정확히 같은 것이 필요했습니다. 이것이 나를 위해 일한 것입니다.

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

이것을 지원합니다 :

사용자가 옵션을 선택 하면 같은 옵션을 다시

몇 달 전에 디자인을 만들 때도 같은 문제가있었습니다. 내가 찾은 해결책 은 사용중인 요소 .live("change", function())와 함께 사용하는 것이 었습니다 .blur().

사용자가 단순히 대신 변화의, 클릭 할 때 당신이 무언가를 얻고 자하는 경우에, 다만 교체 change와 함께 click.

드롭 다운에 ID를 할당 selected하고 다음을 사용했습니다.

$(function () {
    $("#selected").live("change", function () {

    // do whatever you need to do

    // you want the element to lose focus immediately
    // this is key to get this working.
    $('#selected').blur();
    });
});

나는이 답변에 선택된 답변이 없다는 것을 알았으므로 입력을 줄 것이라고 생각했습니다. 이것은 나를 위해 훌륭하게 작동 했으므로 다른 사람이 붙어있을 때이 코드를 사용할 수 있기를 바랍니다.

http://api.jquery.com/live/

편집 : on와 달리 셀렉터를 사용하십시오 .live. jQuery .on () 참조

단지 아이디어이지만 각 <option>요소를 클릭 할 수 있습니까?

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

다른 옵션은 선택시 onblur를 사용하는 것입니다. 사용자가 선택 영역을 클릭 할 때마다 실행됩니다. 이 시점에서 어떤 옵션이 선택되었는지 확인할 수 있습니다. 올바른 시간에 트리거하기 위해 옵션을 클릭하면 필드가 흐려질 수 있습니다 (jQuery에서 다른 것을 활성화하거나 .blur ()).

onclick 접근 방식은 완전히 나쁘지는 않지만 마우스 클릭으로 값을 변경하지 않으면 트리거되지 않습니다.
그러나 onchange 이벤트에서 onclick 이벤트를 트리거 할 수 있습니다.

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>

jitbit의 답변을 확장하려고합니다. 드롭 다운을 클릭 한 다음 아무것도 선택하지 않고 드롭 다운을 클릭하면 이상하다는 것을 알았습니다. 결과는 다음과 같습니다.

var lastSelectedOption = null;

DDChange = function(Dd) {
  //Blur after change so that clicking again without 
  //losing focus re-triggers onfocus.
  Dd.blur();

  //The rest is whatever you want in the change.
  var tcs = $("span.on_change_times");
  tcs.html(+tcs.html() + 1);
  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

DDFocus = function(Dd) {
  lastSelectedOption = Dd.prop("selectedIndex");
  Dd.prop("selectedIndex", -1);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

//On blur, set it back to the value before they clicked 
//away without selecting an option.
//
//This is what is typically weird for the user since they 
//might click on the dropdown to look at other options,
//realize they didn't what to change anything, and 
//click off the dropdown.
DDBlur = function(Dd) {
  if (Dd.prop("selectedIndex") === -1)
    Dd.prop("selectedIndex", lastSelectedOption);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
}; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
  <option>1</option>
  <option>2</option>
</select>
<br/>
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>

이것은 사용자에게 조금 더 의미가 있으며 이전 옵션을 포함한 옵션을 선택할 때마다 JavaScript가 실행될 수 있도록합니다.

이 방법의 단점은 드롭 다운으로 탭하는 기능을 중단하고 화살표 키를 사용하여 값을 선택한다는 것입니다. 모든 사용자가 영원이 끝날 때까지 모든 것을 클릭하기 때문에 이것은 받아 들일 만했습니다.

이와 같이 작동하기 위해 이것이 정말로 필요하다면, 이것을 할 것입니다 (키보드와 마우스로 작동하도록)

• "현재"값을 설정하기 위해 선택에 onfocus 이벤트 핸들러 추가
• 마우스 클릭을 처리하기 위해 선택에 onclick 이벤트 핸들러 추가
• 키보드 변경을 처리하기 위해 선택에 onkeypress 이벤트 핸들러 추가

불행히도 onclick은 여러 번 실행됩니다 (예 : 선택 ... 및 선택 / 닫기시) 아무것도 변경되지 않으면 onkeypress가 발생할 수 있습니다 ...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>

사용자가 무언가를 선택할 때마다 (같은 옵션이라도) 이벤트를 올바르게 발생 시키려면 선택 상자를 비틀기 만하면됩니다.

다른 사람들이 말했듯이 음수를 지정하십시오. selectedIndex 이 변경 이벤트를 강제로 수행하려면 초점에 을 . 이렇게하면 선택 상자를 속일 수 있지만 여전히 포커스가있는 한 작동하지 않습니다. 간단한 수정은 아래 그림과 같이 선택 상자가 흐리게 표시되도록하는 것입니다.

표준 JS / HTML :

<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

jQuery 플러그인 :

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script type="text/javascript">
    $.fn.alwaysChange = function(callback) {
        return this.each(function(){
            var elem = this;
            var $this = $(this);

            $this.change(function(){
                if(callback) callback($this.val());
            }).focus(function(){
                elem.selectedIndex = -1;
                elem.blur();
            });
        });
    }


    $('select').alwaysChange(function(val){
        // Optional change event callback,
        //    shorthand for $('select').alwaysChange().change(function(){});
    });
</script>

실제 데모를 볼 수 있습니다 .

실제로 사용자가 키보드를 사용하여 선택 컨트롤에서 선택을 변경하면 onclick 이벤트가 발생하지 않습니다. 원하는 동작을 얻으려면 onChange와 onClick의 조합을 사용해야 할 수도 있습니다.

이것은 귀하의 질문에 직접 대답하지 못할 수도 있지만, 간단한 설계 수준 조정으로이 문제를 해결할 수 있습니다. 이 내용이 모든 사용 사례에 100 % 적용되는 것은 아니라는 점을 이해하지만 응용 프로그램의 사용자 흐름을 다시 생각하고 다음과 같은 설계 제안을 구현할 수 있는지 강력히 권고합니다.

onChange()이 목적을 위해 실제로 의도되지 않은 다른 이벤트 를 사용하는 해킹 대안보다 간단한 것을하기로 결정했습니다 blur.click , 등)

내가 해결 한 방법 :

값이없는 select와 같은 자리 표시 자 옵션 태그를 미리 추가하십시오.

따라서 다음 구조를 사용하는 대신 해킹 대안이 필요합니다.

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

이것을 사용하는 것을 고려하십시오 :

<select>
  <option selected="selected">Select...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

따라서이 방법으로 코드가 훨씬 단순화되고 onChange사용자가 기본값 이외의 것을 선택하기로 결정할 때마다 예상대로 작동합니다. disabled속성을 다시 선택하고 옵션에서 무언가를 선택하지 않도록하려면 첫 번째 옵션에 속성을 추가 할 수도 있습니다 .onChange() 화재 .

이 답변 당시 복잡한 Vue 응용 프로그램을 작성 중이며이 디자인 선택으로 코드가 많이 단순화되었습니다. 이 솔루션으로 해결하기 전에이 문제에 몇 시간을 보냈고 많은 코드를 다시 작성할 필요가 없었습니다. 그러나 해키 대안을 사용한다면, 아약스 요청 등의 이중 발생을 막기 위해 최첨단 사례를 고려해야했을 것입니다. 브라우저도).

때로는 한 걸음 물러서서 가장 간단한 솔루션을위한 큰 그림에 대해 생각하기 만하면됩니다.

비슷한 문제에 직면했을 때 새 일반 옵션 ( '옵션 선택'또는 이와 유사한 것)을 추가하는 선택 상자에 'onFocus'를 추가하고 선택한 옵션으로 기본 설정합니다.

그래서 내 목표는 onchange () 함수를 덮어 쓰고 동일한 onclick () 메서드로 바꾸는 동일한 값을 여러 번 선택할 수 있도록하는 것이 었습니다.

위의 제안에 따라 나는 이것을 위해 일한 것을 생각해 냈습니다.

<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($('#hi').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
    <option value="-1">--</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

http://jsfiddle.net/dR9tH/19/

우선 u는 onChange를 이벤트 핸들러로 사용하고 플래그 변수를 사용하여 변경 할 때마다 원하는 기능을 수행합니다.

<select

var list = document.getElementById("list");
var flag = true ; 
list.onchange = function () {
if(flag){
document.bgColor ="red";
flag = false;

}else{
document.bgColor ="green";
flag = true;
}
}

<select id="list"> 
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>

열 헤더와 같은 추가 옵션을 첫 번째로 추가하십시오.이 옵션은 클릭하기 전에 드롭 다운 버튼의 기본값이되며 끝에서 재설정 doSomething()되므로 A / B / C를 선택하면 onchange 이벤트가 항상 트리거됩니다. 선택이 State이면 아무것도하지 않고 돌아갑니다. onclick많은 사람들이 이전에 언급했듯이 매우 불안정합니다. 따라서 우리가해야 할 일은 실제 옵션과 다른 초기 버튼 레이블을 만드는 것이므로 onchange는 모든 옵션에서 작동합니다.

<select id="btnState" onchange="doSomething(this)">
  <option value="State" selected="selected">State</option>  
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


function doSomething(obj)
{
    var btnValue = obj.options[obj.selectedIndex].value;

    if (btnValue == "State")
    {
      //do nothing
      return;
    }

    // Do your thing here

    // reset 
    obj.selectedIndex = 0;
}

select 태그 (이 시나리오에서)의 멋진 점은 옵션 태그에서 값을 가져옵니다.

시험:

<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>

나를 위해 괜찮은 일을했습니다.

jquery를 사용하십시오.

<select class="target">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script>
    $('.target').change(function() { doSomething(); });
</script>

여기 내 다른 솔루션과 완전히 다른 내 솔루션이 있습니다. 선택 상자를 클릭하여 드롭 다운을 열지 않고 옵션을 클릭했는지 파악하기 위해 마우스 위치를 사용합니다. 이것은 신뢰할 수있는 유일한 크로스 브라우저 변수이므로 event.screenY 위치를 사용합니다. 호버 이벤트를 먼저 연결해야 클릭 이벤트 이전의 화면에 대한 컨트롤 위치를 파악할 수 있습니다.

var select = $("select");

var screenDif = 0;
select.bind("hover", function (e) {
    screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
    var element = $(e.target);
    var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
    if (e.screenY > eventHorizon)
        alert("option clicked");
});

여기 내 jsFiddle http://jsfiddle.net/sU7EV/4/입니다

당신은 사용을 시도해야 option:selected

$("select option:selected").click(doSomething);

나를 위해 일하는 것 :

<select id='myID' onchange='doSomething();'>
    <option value='0' selected> Select Option </option>
    <option value='1' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > A </option>
    <option value='2' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > B </option>
</select>

그런 식으로 옵션이 변경되면 onchange가 'doSomething ()'을 호출하고 onchange 이벤트가 false 인 경우 즉, 동일한 옵션을 선택하면 onclick이 'doSomething ()'을 호출합니다.

이것을 시도하십시오 (옵션을 변경하지 않고 옵션을 선택할 때 정확하게 트리거되는 이벤트) :

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert('selected');
    }
    $(this).data("isopen", !open);
});

http://jsbin.com/dowoloka/4

<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>

<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>

여기에 색인이 반환되고 js 코드 에서이 반환을 하나의 스위치 또는 원하는 것으로 사용할 수 있습니다.

이 시도:

<select id="nameSelect" onfocus="javascript:document.getElementById('nameSelect').selectedIndex=-1;" onchange="doSomething(this);">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

오래 전부터 원래 질문에 대한 답으로 도움이 되겠습니까? 그냥 줄에 넣으 onClick십시오 SELECT. 그런 다음 각 행 OPTION에 원하는 것을 넣으십시오 OPTION. 즉 :

<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>

<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

나는 비슷한 요구에 직면하여 같은 것에 대한 angularjs 지시문을 작성했습니다.

guthub 링크-각도 선택

익숙한 element[0].blur();선택 태그에서 초점을 제거하는 됩니다. 논리는 드롭 다운을 두 번 클릭 할 때이 흐림을 유발하는 것입니다.

as-select 사용자가 드롭 다운에서 동일한 값을 선택하더라도 트리거됩니다.

데모- 링크

하나의 진정한 답변은 선택 필드를 사용하지 않는 것입니다 (동일한 답변을 다시 선택할 때 무언가를해야하는 경우).

기존의 div, 버튼, 표시 / 숨기기 메뉴로 드롭 다운 메뉴를 만듭니다. 링크 : https://www.w3schools.com/howto/howto_js_dropdown.asp

이벤트 리스너를 옵션에 추가 할 수 있었으면 피할 수있었습니다. select 요소에 대한 onSelect 리스너가있는 경우 그리고 선택 필드를 클릭해도 mousedown, mouseup 및 mousedown을 동시에 클릭하지 않아도됩니다.

동일한 옵션을 다시 선택하더라도 이전 값을 기억하고 변경 이벤트를 트리거하기 위해 여기에서 수행 할 작업이 몇 가지 있습니다.

가장 먼저 원하는 것은 일반적인 onChange 이벤트입니다.

$("#selectbox").on("change", function(){
    console.log($(this).val());
    doSomething();
});

동일한 옵션을 다시 선택한 경우에도 onChange 이벤트가 트리거되도록하려면 드롭 다운에서 잘못된 값을 설정하여 포커스를받을 때 선택한 옵션을 설정 해제 할 수 있습니다. 그러나 사용자가 새 옵션을 선택하지 않은 경우 이전에 선택한 값을 저장하여 값을 복원하려고합니다.

prev_select_option = ""; //some kind of global var

$("#selectbox").on("focus", function(){
    prev_select_option = $(this).val(); //store currently selected value
    $(this).val("unknown"); //set to an invalid value
});

위의 코드를 사용하면 동일한 값을 선택하더라도 변경을 트리거 할 수 있습니다. 그러나 사용자가 선택 상자 외부를 클릭하면 이전 값을 복원하려고합니다. 우리는 onBlur에서 수행합니다.

$("#selectbox").on("blur", function(){
    if ($(this).val() == null) { 
       //because we previously set an invalid value 
       //and user did not select any option
        $(this).val(prev_select_option);
    }
});

IE의 OPTION 태그에는 이벤트 핸들러가 지원되지 않는다는 점에주의하십시오.

<script>
var flag = true;
function resetIndex(selObj) {
    if(flag) selObj.selectedIndex = -1;
    flag = true;
}
function doSomething(selObj) {
    alert(selObj.value)
    flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

내가 여기서하고있는 일은 실제로 onchange 이벤트가 항상 트리거되도록 select 인덱스를 재설정하는 것입니다. 클릭하면 선택한 항목이 손실되고 목록이 길면 성가신 것이지만 어쨌든 도움이 될 수 있습니다 ..

요소가 포커스를 얻을 때 선택 값을 변경하는 방법은 무엇입니까 (예 : (jquery 사용)).

$("#locationtype").focus(function() {
    $("#locationtype").val('');
});

$("#locationtype").change(function() {
    if($("#locationtype").val() == 1) {
        $(".bd #mapphp").addClass('show');
        $("#invoerform").addClass('hide');
    }
    if($("#locationtype").val() == 2) {
        $(".lat").val('');
        $(".lon").val('');
    }
});

이 솔루션을 찾았습니다.

select 요소의 selectedIndex를 초기에 0으로 설정

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

이 메소드 onChange 이벤트를 호출하십시오.