어드민, Author at 리뷰나라

[javascript] 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>