2016-08-07 3 views
0

드롭 다운 목록을 클릭 할 때마다 첫 번째 이벤트는 이미 드롭 다운 목록에로드되어 있으며 두 번째 이벤트는 드롭 다운 목록에서 클릭 한 것과 같습니다. 기본적으로 두 가지 이벤트가 발생하지만 두 번째 클릭 만하면됩니다.옵션을 두 번 클릭하십시오.

HTML

<select class="pictureList" id="pictureList"> 
<option class ="option0" id="option0">select a picture</option> 
<option class ="option1" id="option1">picture 1</option> 
<option class ="option2" id="option2">picture 2</option> 
</select> 

자바 스크립트

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById("pictureList").addEventListener("onkeyup", actionListener, false); 
}, false); 

function actionListener(event) { 
    if(event.target == document.getElementById("pictureList")) { 
    loadPicture(); 
    } 
} 

function loadPicture() { 
    var picture = document.getElementById("pictureList"); 
    if (picture == "select a picture") 
    load; 
    else if (picture == "picture 1") 
    load; 
    else if (picture == "picture 2") 
    load; 
} 

그래서 모든 것이 제대로로드되는, 그것이 내가 다른 옵션을 보려면 목록을 클릭 할 때마다, 이미 목록에 어떤로드하는 것과 있다고합니다. 예를 들어 목록은 그림 1에서 시작하여 그림 2를로드하려고합니다. 그런 다음 옵션을 보려면 목록을 클릭하고 그림 1은 다시로드 된 다음 그림 2를 클릭하면로드됩니다. 그림 1이 다시로드되기를 원하지 않습니다. 나는 또한 onchange를 시도했다, 그러나 아직도 그것을 할 것입니다.

+1

'change' 이벤트를 찾고 있습니다. https://developer.mozilla.org/en-US/docs/Web/Events/change 실제로 선택 항목을 선택할 때 트리거됩니다. – yuriy636

+0

그래, 나는 변화를 시도하고 그것을 할 것입니다. – Jason

+0

코드에서 '로드;'는 무엇을합니까? – yuriy636

답변

1

addEventListener에서 "onkeyup"대신 "change"를 시도 할 수 있습니다.
예 : document.getElementById ("pictureList"). addEventListener ("change", actionListener, false);

참조 URL : addEventListener, "change" and option selection

또는 더 많은 도움을 당신이 "[email protected]"에 나에게 코드의 일부를 보낼 수 있습니다.

+0

변경을 시도했지만 작동하지 않습니다. – Jason

관련 문제