Question

我正在尝试使用getElementsByClassName使我的选择选项跳转到其网址，具体取决于值：

http://www.example.com/?page_id="value"

以下是我所做的：http://jsfiddle.net/VvLXk/2/

但它没有用。

我知道我可以使用getElementByID，但我有三个选择元素（我可能会添加更多元素）。我相信它只适用于一个元素。因此我使用了无效的getElementsByClassName。

我的代码出了什么问题？欢迎使用Javascript / JQuery解决方案。

Answer 1

如How to use getElementsByClassName in javascript-function?中所述，getElementsByClassName()提供了一系列元素。要分配事件处理程序，您必须迭代它并修改每个单独的元素。

for (var i = 0, l = dropdown.length; i < l; i++) {
    dropdown[i].onchange = onCatChange;
}

然后，您可以在处理程序dropdown中使用this引用触发事件的单个function。

function onCatChange() {
    if ( this.options[this.selectedIndex].value > 0 ) {
        // etc.
    }
}

修改过的小提琴：http://jsfiddle.net/jLLHH/（注意：记录而不是重定向）

Answer 2

此问题已在此处得到解答：How to use getElementsByClassName in javascript-function?

http://jsfiddle.net/VvLXk/9/这是一个有效的示例：

var dropdown = document.getElementsByClassName("page-dropdown")[0];
function onCatChange()
{
    if ( dropdown.options[dropdown.selectedIndex].value > 0 )
    {

        location.href = "http://www.example.com/?page_id="+dropdown.options[dropdown.selectedIndex].value;
    }
}

dropdown.onchange = onCatChange;

Answer 3

您选择的将返回数组，请尝试：

var dropdown = document.getElementsByClassName("page-dropdown");

function onCatChange()
{
    alert(dropdown[0]);
    if ( dropdown[0].options[dropdown[0].selectedIndex].value > 0 )
    {
        window.location.href = "http://www.example.com/?page_id="+dropdown[0].options[dropdown[0].selectedIndex].value;
    }
}
dropdown[0].onchange = onCatChange;

希望这会有所帮助..干杯!!

javascript getElementsByClassName无法使用<select> </select>

3 个答案: