Использование Javascript для изменения URL на основе опции, выбранной в раскрывающемся списке - PullRequest
Новая
       14

Использование Javascript для изменения URL на основе опции, выбранной в раскрывающемся списке

0 голосов
/ 07 мая 2009

Я не могу заставить это работать. Есть мысли? 

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

Ответы [ 4 ]

5 голосов
/ 07 мая 2009

Я не уверен, какое значение 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>
4 голосов
/ 07 мая 2009

Ваша функция не будет работать в контексте элемента select, потому что вы просто регулярно вызываете функцию. Для борьбы с этим либо ненавязчиво обработайте событие, либо передайте «this» из вашего обработчика «onchange»:

Вариант 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);
1 голос
/ 07 мая 2009

Вы можете использовать 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>
0 голосов
/ 07 мая 2009

Это домашняя работа? Есть несколько способов исправить это, но один простой способ - заставить selectVideo принять параметр obj, а затем изменить все ссылки внутри него на obj. Затем выберите Video (this) в onchange.

Я настоятельно рекомендую QuirksMode , особенно эту страницу , если вы действительно хотите это понять.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...