자바 스크립트를 사용하여 드롭 다운에서 선택한 옵션을 기반으로 URL을 변경하십시오.

나는이 기능을 사용할 수 없습니다. 이견있는 사람?자바 스크립트를 사용하여 드롭 다운에서 선택한 옵션을 기반으로 URL을 변경하십시오.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Select Video Test</title> 
<script type="text/javascript"> 
    function selectVideo(){ 
     var urlString = "http://www.mycookingsite.com/"; 
     var selectedVideo = this.options[this.selectedIndex]; 
     if (selectedVideo.value != "nothing"){ 
      window.location = urlString + selectedVideo.value; 
     } 
    } 
</script> 
</head> 

<body> 

<form> 
    <select onchange="selectVideo()"> 
    <option value="nothing">Select video from this list</option> 
    <option value="how-to-grill-burgers">How to Grill Burgers</option> 
     <option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option> 
    </select> 
</form> 
</body> 
</html>

출처

2009-05-07 jerome

이벤트 코드에있는 경우에만 this을 사용할 수 있습니다. 함수에있을 때 this은 window 객체를 참조합니다. 함수에 매개 변수로 참조를 보내십시오.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Select Video Test</title> 
<script type="text/javascript"> 
    function selectVideo(obj){ 
     var urlString = "http://www.mycookingsite.com/"; 
     var selectedVideo = obj.options[obj.selectedIndex]; 
     if (selectedVideo.value != "nothing"){ 
       window.location = urlString + selectedVideo.value; 
     } 
    } 
</script> 
</head> 

<body> 

<form> 
    <select onchange="selectVideo(this)"> 
    <option value="nothing">Select video from this list</option> 
    <option value="how-to-grill-burgers">How to Grill Burgers</option> 
     <option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option> 
    </select> 
</form> 
</body> 
</html>

출처

2009-05-07 17:43:11 Guffa

나는 this의 값이 코드에서 무엇인지 확실하지 않다,하지만 <select> 요소 아니다. 다음은 작동 코드입니다.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Select Video Test</title> 
<script type="text/javascript"> 
    function selectVideo(){ 
     var urlString = "http://www.mycookingsite.com/"; 
     var videos = document.getElementById('videos'); 
     var selectedVideo = videos.options[videos.selectedIndex]; 
     if (selectedVideo.value != "nothing"){ 
       window.location = urlString + selectedVideo.value; 
     } 
    } 
</script> 
</head> 

<body> 

<form> 
    <select id='videos' onchange="selectVideo()"> 
    <option value="nothing">Select video from this list</option> 
    <option value="how-to-grill-burgers">How to Grill Burgers</option> 
     <option value="how-to-hard-boil-eggs">How to Make Hard-Boiled Eggs</option> 
    </select> 
</form> 
</body> 
</html>

출처

2009-05-07 17:35:49 RichieHindle

이 함수는 방금 함수를 호출하기 때문에 'select'요소의 컨텍스트 내에서 실행되지 않습니다. 이 문제를 방지하려면 다음 중 하나를 겸손하게 이벤트를 처리 또는 합격 '이'내에서 핸들러 'onchange를'

옵션 1 :

// first, give 'select' an id 
document.getElementById('select-id').onchange = selectVideo;

옵션 2 :

<select onchange="selectVideo.call(this)">

옵션 3 : (최고의 IMHO)

function addEvent(elem, type, fn) { 
    var W3C, callback = function(e){ fn.call(elem, e||window.event); }; 
    ((W3C = elem.addEventListener) || elem.attachEvent) 
     ((W3C?'':'on') + type, callback, false); 
    return callback; 
} 

addEvent(document.getElementById('select-id'), 'change', selectVideo);

출처

2009-05-07 17:36:10 James

-1

이 숙제입니까? 여러 가지 방법으로이를 수정할 수 있지만 한 가지 간단한 방법은 selectVideo를 obj 매개 변수로 가져와 내부의 모든 참조를 obj로 변경하는 것입니다. 그런 다음 onchange에서 비디오 (this)를 선택하십시오.

정말 이것을 이해하고 싶다면 QuirksMode, 특히 this this page을 적극 권장합니다.

출처

2009-05-07 17:36:38

자바 스크립트를 사용하여 드롭 다운에서 선택한 옵션을 기반으로 URL을 변경하십시오.

답변

관련 문제