2016-09-23 1 views
0

선택 드롭 다운의 onChange를 캡처하는 Javascript 기능이 있습니다. 키보드를 사용하여 위 또는 아래로 스크롤 할 때가 아니라 사용자가 마우스를 사용하여 드롭 다운 메뉴를 사용하여 항목을 선택하는 경우에만 이벤트를 실행할 수 있습니까?Javascript onChange 마우스를 사용할 때만 변경

+2

클릭 이벤트가 있는지 확인할 수 있습니다. 왜 이렇게하고 싶지는 모르겠지만, 일부 비활성화 된 사용자는 마우스를 사용하는 대신 키보드 나 다른 형식의 입력을 사용해야합니다. –

+0

작동하지 않습니다 onclick? – bjanes

+0

이처럼 https://jsfiddle.net/ou8z1q47/? –

답변

0
Have you tried this : 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>change demo</title> 
    <style> 
    div { 
    color: red; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<select name="sweets" multiple="multiple"> 
    <option>Chocolate</option> 
    <option selected="selected">Candy</option> 
    <option>Taffy</option> 
    <option selected="selected">Caramel</option> 
    <option>Fudge</option> 
    <option>Cookie</option> 
</select> 
<div></div> 

<script> 
$("select") 
    .change(function() { 
    var str = ""; 
    $("select option:selected").each(function() { 
     str += $(this).text() + " "; 
    }); 
    $("div").text(str); 
    }) 
    .change(); 
</script> 

</body> 
</html> 
    Trigger the handler 
</div> 
+0

jquery가 아닌 원시 자바 스크립트를 사용하십시오. 질문 태그는 자바 스크립트와 onchange에 관한 것입니다. –

+0

$ (document) .on ('change', '.entity', function() { var selectedCatId = $ (this) .val(); –

0

확인이 솔루션은, 그것은 키보드 선택, 당신이

0

가 이걸 IE에서 잘 작동 시도를 위해이 확실히 작동하는 마우스

<script type="text/javascript"> 
function IgnoreAlpha(e) 
{ 
if (!e) 
{ 
    e = window.event ; 
} 
if (e.keyCode >= 65 && e.keyCode <= 90) // A to Z 
{ 
    e.returnValue=false; 
    e.cancel = true; 
} 
} 
</script> 

<body> 
<p> 
    <select id="MySelect" name="MySelect" onkeydown="IgnoreAlpha(event);""> 
     <option selected="selected" value="" /> 
     <option value="A">A</option> 
     <option value="B">B</option> 
     <option value="C">C</option> 
    </select> 
</p> 
</body> 

를 사용하여 선택할 수있는 유일한 방법을 무시 크롬에서는 그렇지 않다. 이유는 모르겠다? IE 디버거 도구 (잘 작동 함)를 사용하고 VS2015 (IE, break point onkeydown)를 사용하여 테스트했지만 크롬에서 실행될 때 중단 점에 도달하지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
     function IgnoreArrow(e) 
     { 

     if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode ==39 || e.keyCode ==40) 
     { 
      return false; 
     } 
     } 

     function myFun() { 
      var x = document.getElementById("mySelect").value; 
      document.getElementById("demo").innerHTML = "You selected: " + x; 

     } 
</script>  
</head> 
<body>  
     <p> 
    <select id="mySelect" name="mySelect" onkeydown="return IgnoreArrow(event);" onchange="myFun()"> 
     <option selected="selected" value="" /> 
     <option value="Dream Theater">Dream Theater</option> 
     <option value="Metallica">Metallica</option> 
     <option value="Iron Maiden">Iron Maiden</option> 
    </select> 
</p> 
<p id="demo"></p> 


</body> 
</html> 
관련 문제