Question

我似乎无法让这个工作。有什么想法吗？

<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>

Answer 1

我不确定代码中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>

Answer 2

您的函数不会在'select'元素的上下文中运行，因为您只是定期调用该函数。为了解决这个问题，要么不引人注意地处理事件，要么从'onchange'处理程序中传递'this'：

选项1：

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

选项2：

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

选项3 :(最好的恕我直言）

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);

Answer 3

您只能在事件代码中使用this。当您在函数中时，this引用窗口对象。将引用作为参数发送到函数：

<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>

Answer 4

这是家庭作业吗？有多种方法可以纠正它，但一种简单的方法是让selectVideo获取一个obj参数，然后将其内部的所有引用更改为obj。然后，在onchange中执行selectVideo（this）。

如果你想真正理解这一点，我强烈推荐QuirksMode，特别是this this page。

使用Javascript根据下拉列表中选择的选项更改URL

4 个答案: