HTML SELECT-옵션이 변경되지 않은 경우에도 JavaScript ONCHANGE 이벤트 트리거

HTML SELECT-옵션이 변경되지 않은 경우에도 JavaScript ONCHANGE 이벤트 트리거

---

다음 마크 업이 있습니다.

<select onchange="jsFunction()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

사용자가 콤보 상자를 아래로 내리고 이전에 선택한 것과 동일한 옵션을 선택하면 (또는 선택 항목을 전혀 변경하지 않음) JavaScript는이를 onchange이벤트 로 간주하지 않습니다 . 그래서 jsFunction()는 호출되지 않습니다. 하지만 jsFunction()이 경우에도 호출을 원합니다 . 이것을 어떻게 달성 할 수 있습니까?

---

나는 다음과 같이 할 것입니다.

<select onchange="jsFunction()">
  <option value="" disabled selected style="display:none;">Label</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

원하는 경우 첫 번째 옵션과 동일한 레이블을 사용할 수 있습니다.이 경우에는 1입니다. 더 나은 방법 : 상자에 선택 항목에 대한 레이블을 넣습니다.

---

해결하려면 빈 옵션을 추가해야합니다.

또한 하나 이상의 솔루션을 제공 할 수 있지만 jsFunction 이외의 옵션을 선택한 후 사용자가 기본 옵션을 선택하면 두 번 호출되기 때문에 괜찮은지 여부는 사용자에게 달려 있습니다.

<select onChange="jsFunction()" id="selectOpt">
    <option value="1" onclick="jsFunction()">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

function jsFunction(){
  var myselect = document.getElementById("selectOpt");
  alert(myselect.options[myselect.selectedIndex].value);
}

---

selectIndex관련 <select>태그 -1의을 이벤트 처리의 마지막 단계로 설정하면 됩니다.

mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1; 

매번 작동하여 강조 표시를 제거하고 동일한 (또는 다른) 요소를 다시 선택할 수 있습니다.

---

각 옵션 요소에 "onmouseup"속성을 사용합니다. 장황하지만 작동합니다. 또한 함수가 실제로 수행하는 작업에 따라 처리기에서 숫자가 중요하다고 가정하여 약간 다르게 정렬 할 수 있습니다.

<select>
<option onmouseup="handler()" value="1">1</option>  //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option>  //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>

---

자바 스크립트 코드 :

• mousedown 이벤트 : selectedIndex 속성 값을 -1로 설정
• 변경 이벤트 : 이벤트 처리

유일한 단점은 사용자가 드롭 다운 목록을 클릭 할 때 현재 선택된 항목이 선택된 것으로 나타나지 않는다는 것입니다.

---

이 시도. 빈 옵션을 추가하기 만하면됩니다. 이것은 당신의 문제를 해결할 것입니다.

<select onchange="jsFunction()">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>​

---

값이 "변경"되지 않았기 때문에 실행되지 않습니다. 같은 가치입니다. 불행히도 change이벤트를 사용하여 원하는 동작을 얻을 수 없습니다 .

blur이벤트를 처리하고 사용자가 선택 상자를 떠날 때 필요한 모든 처리를 수행 할 수 있습니다 . 이렇게하면 사용자가 동일한 값을 선택하더라도 필요한 코드를 실행할 수 있습니다.

참조 URL : https://stackoverflow.com/questions/11877527/html-select-trigger-javascript-onchange-event-even-when-the-option-is-not-chan