[JQUERY] 크롬에서 옵션을 선택 요소에 이벤트를 클릭

크롬에서 옵션을 선택 요소에 이벤트를 클릭

해결법

1. ---

   1.내가 클릭 이벤트가 옵션에 유효 믿지 않는다. 그것은 선택 요소에, 그러나, 유효합니다. 이것을를 사용 해보세요 :

   내가 클릭 이벤트가 옵션에 유효 믿지 않는다. 그것은 선택 요소에, 그러나, 유효합니다. 이것을를 사용 해보세요 :

   $("select#yourSelect").change(function(){
       process($(this).children(":selected").html());
   });
   

2. ---

   2.우리는 직접 <선택>와 이벤트를 호출에도 불구하고이 다른 방법으로 달성 할 수있다.

   우리는 직접 <선택>와 이벤트를 호출에도 불구하고이 다른 방법으로 달성 할 수있다.

   JS 부 :

   $("#sort").change(function(){
   
       alert('Selected value: ' + $(this).val());
   });
   

   HTML 부분 :

   <select id="sort">
       <option value="1">View All</option>
       <option value="2">Ready for Review</option>
       <option value="3">Registration Date</option>
       <option value="4">Last Modified</option>
       <option value="5">Ranking</option>
       <option value="6">Reviewed</option>
   </select>
   

3. ---

   3.쉬운 방법은 선택을 변경하고,이입니다 업데이트합니다.

   쉬운 방법은 선택을 변경하고,이입니다 업데이트합니다.

   // BY id
   $('#select_element_selector').val('value').change();
   

   다른 예시:

   //By tag
   $('[name=selectxD]').val('value').change();
   

   다른 예시:

   $("#select_element_selector").val('value').trigger('chosen:updated');
   

4. ---

   4.나는 다음은 나를 위해 일한 것을 발견 - 대신 예컨대 변화에 대한 클릭, 사용을 사용하여 :

   나는 다음은 나를 위해 일한 것을 발견 - 대신 예컨대 변화에 대한 클릭, 사용을 사용하여 :

    jQuery('#element select').on('change',  (function() {
   
          //your code here
   
   }));
   

5. ---

   5.나는 비슷한 문제를 했어. 나는 일부 데이터 옵션에 대한 사용자의 클릭을 새로 고칠 필요했기 때문에 변경 이벤트가 나를 위해 좋지 않았다. 몇 가지 실험 후 나는이 솔루션을 가지고있다 :

   나는 비슷한 문제를 했어. 나는 일부 데이터 옵션에 대한 사용자의 클릭을 새로 고칠 필요했기 때문에 변경 이벤트가 나를 위해 좋지 않았다. 몇 가지 실험 후 나는이 솔루션을 가지고있다 :

   $('select').on('click',function(ev){
       if(ev.offsetY < 0){
         //user click on option  
       }else{
         //dropdown is shown
       }
   });
   

   나는 이것이 아주 못생긴 동의 어디 당신이 할 수있는 당신은 변경 이벤트에 충실해야하지만,이 내 문제를 해결했다.

6. ---

   6.

   <select id="myselect">
       <option value="0">sometext</option>
       <option value="2">Ready for Review</option>
       <option value="3">Registration Date</option>
   </select>
   
   $('#myselect').change(function() {
       if($('#myselect option:selected').val() == 0) {
       ...
       }
       else {
       ...
       }
   });
   

7. ---

   7.2018에이 찾고. 옵션 태그에 이벤트를 클릭 선택 태그 안에, 크롬에 해고되지 않습니다.

   2018에이 찾고. 옵션 태그에 이벤트를 클릭 선택 태그 안에, 크롬에 해고되지 않습니다.

   사용 변경 이벤트 및 캡처 선택한 옵션 :

   $(document).delegate("select", "change", function() {
       //capture the option
       var $target = $("option:selected",$(this));
   });
   

   select 태그가 다수 인 경우 $ 대상 개체의 컬렉션 일 수 있다는 점에주의해야합니다.

8. ---

   8.나는 두 부분의 솔루션을 사용

   나는 두 부분의 솔루션을 사용

   HTML

   <select id="sneaky-select">
     <option id="select-item-1">Hello</option>
     <option id="select-item-2">World</option>
   </select>
   

   JS

   $("#select-item-1").click(function () { alert('hello') });
   $("#select-item-2").click(function () { alert('world') });
   
   $("#sneaky-select").change(function ()
   {
      $("#sneaky-select option:selected").click();
   });
   

9. ---

   9.무엇 일반적으로 나를 위해 작동하는 것은, 예를 들어, 첫 번째 변경에 드롭 다운의 값입니다

   무엇 일반적으로 나를 위해 작동하는 것은, 예를 들어, 첫 번째 변경에 드롭 다운의 값입니다

   $ ( '#의 selectorForOption'). ATTR ( '선택', '선택')

   다음 A 변화를 트리거

   $ ( '#의 selectorForOption'). 변경 ()

   이 방법에 연결되어있는 자바 스크립트

10. ---

    10.어쩌면 새로운 JQuery와 버전 중 하나는 옵션에 대한 클릭 이벤트를 지원합니다. 그것은 나를 위해 일한 :

    어쩌면 새로운 JQuery와 버전 중 하나는 옵션에 대한 클릭 이벤트를 지원합니다. 그것은 나를 위해 일한 :

    $(document).on("click","select option",function() {
      console.log("nice to meet you, console ;-)");
    });
    

    UPDATE : 가능한 유스 케이스는 다음과 같을 수 사용자가 HTML 폼을 전송하고 값을 데이터베이스에 삽입된다. 그러나 하나 이상의 값이 기본적으로 설정이 자동으로 항목을 플래그된다. 당신은 또한 자신의 항목이 자동으로 생성되어 사용자에게 보여 주지만, 그는 이미 선택 옵션을 클릭하여 입력을 확인하는 경우는 데이터베이스에 플래그를 변경합니다. 희귀 고소의 경우 만 가능 ...

11. ---

    11.나는이 코드는 (적어도 크롬과 FF에서) 옵션 클릭을 인식 작동 것을 알고있다. 요소가 DOM의 부하가 아니었다면 또한, 작동합니다. 나는 하나의 선택 요소로 입력의 입력 섹션과 나는 섹션 제목을 클릭 할 수 싶지 않을 때 나는 보통이를 사용합니다.

    나는이 코드는 (적어도 크롬과 FF에서) 옵션 클릭을 인식 작동 것을 알고있다. 요소가 DOM의 부하가 아니었다면 또한, 작동합니다. 나는 하나의 선택 요소로 입력의 입력 섹션과 나는 섹션 제목을 클릭 할 수 싶지 않을 때 나는 보통이를 사용합니다.

    $(document).on('click', 'option[value="disableme"]', function(){
        $('option[value="disableme"]').prop("selected", false);
    });
    

12. ---

    12.$부터 (이) 더 이상 ES6와 () {}, 당신은 $ 사용하지 말아야 기능 이상이 같은이하지 않는 기능을 화살표 올바르지 않습니다 (이) 당신이 ES6 구문을 사용합니다. 공식 jQuery의 anwser에 따라 외에, 상단의 대답은 말하는 것을 할 수있는 간단한 방법이있다. 선택한 옵션의 HTML을 얻을 수있는 가장 좋은 방법은 사용하는 것입니다

    $부터 (이) 더 이상 ES6와 () {}, 당신은 $ 사용하지 말아야 기능 이상이 같은이하지 않는 기능을 화살표 올바르지 않습니다 (이) 당신이 ES6 구문을 사용합니다. 공식 jQuery의 anwser에 따라 외에, 상단의 대답은 말하는 것을 할 수있는 간단한 방법이있다. 선택한 옵션의 HTML을 얻을 수있는 가장 좋은 방법은 사용하는 것입니다

    $('#yourSelect option:selected').html();
    

    당신은 다른 사람이 (그러나 HTML () 원래의 질문에 있었다) 원하는 텍스트 () 또는 아무것도에 의해 HTML ()를 대체 할 수 있습니다. 그냥 옵션 변경을 선택하면 코드를 실행하기 위해 jQuery의 속기 방법 변경 ()로, 이벤트 리스너 변화를 추가합니다.

     $ ('#yourSelect' ).change(() => {
        process($('#yourSelect option:selected').html());
      });
    

    그냥 옵션의 값을 알고 싶다면 : 선택 (사용자가 선택한하는 옵션을) 당신은 단지 $를 ( '# yourSelect')를 사용할 수 있습니다 발을 ().

13. ---

    13.해결 방법 :

    해결 방법 :

    $ ( '#의 select_id'). ( '변화'(기능에 대한 () { $ (이) .children ( '선택') 트리거 ( '클릭'). }));

from https://stackoverflow.com/questions/1402227/click-event-on-select-option-element-in-chrome by cc-by-sa and MIT license