导航到 URL 取决于在 <option> <select> javascript 中选择哪个

Question

所以，我知道如何导航到一个URL在javascript使用window.location.href="";

但是，我怎样才能听到a被选中呢?

例如，如果我的HTML看起来像这样:

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>

我想在javascript中做的是，当有一个新的值选择时，要听。并在该事件导航到http://somesite.com/optionThatWasChosen。

在psuedo-code:

var optionChosen = null;
select.onChange{
    optionChosen = select.currentChosenOption;
    window.location.href = "http://someSite.com/"+optionChosen;
}

如何在javascript或jQuery中做到这一点?

Answer 1

总之，分配你的选项值，IE:

<option value="xxx">New option</option>

然后为你的选择创建一个onchange事件(确保给你的列表一个ID，我们将使用test在这种情况下)。

纯JS(不需要jQuery):

document.getElementById("test").onchange = function() {
     var selectedOption = this.value;
     window.location.href = "http://someSite.com/" + selectedOption;
}

Answer 2

解决方案将取决于包含目标url的数组，并使用Jquery的index()。这只是一个选择器的问题。

<select id="locs">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>
$(document).ready(function () {
    locations = Array(
        'http://yahoo.com',
        'http://google.com',
        'http://2index.net',
        'http://go.com'
    );
    $("#locs").change(function () {
        goto = locations[$("#locs>option:selected").index()];
        window.location.href = goto;
    })
});

现场演示在这里!