jQuery：基於<Option>導航選擇

Question

新手問題：

在jQuery中，如何在選擇時讓瀏覽器導航到選定的飲料？

<select name="selDrink" id="selDrink"> 
    <option value="http://coke.com">Coke</option> 
    <option value="http://pepsi.com">Pepsi</option> 
</select> 

Answer 1

//select the element and bind a `change` event handler to it 
$('#selDrink').on('change', function() { 

    //redirect the user to the value of the select element 
    window.location = this.value; 
}); 

你可能會想在頂部有一個空白<option>因此所有<option> s的實際value旨意可選：

HTML -

<select name="selDrink" id="selDrink"> 
    <option value="">Choose One</option> 
    <option value="http://coke.com">Coke</option> 
    <option value="http://pepsi.com">Pepsi</option> 
</select> 

JS -

$('#selDrink').on('change', function() { 

    //check if the selected value of this element is blank, if not then redirect to the value 
    if (this.value != '') { 
     window.location = this.value; 
    } 
}); 

請注意，.on()是jQuery 1.7中的新增功能，在這種情況下正在使用，如.bind()。

這裏是一個演示：http://jsfiddle.net/Duanx/

文檔爲window.location：https://developer.mozilla.org/en/DOM/window.location

Answer 2

$("#selDrink").change(function() { 
    window.location.href = $(this).val(); 
}); 

Answer 3

<select name="selDrink" id="selDrink"> 
    <option>Select a Drink</option> 
    <option value="http://coke.com">Coke</option> 
    <option value="http://pepsi.com">Pepsi</option> 
</select> 

<script> 

    $('#selDrink').change(function navigate() { 

     window.location.href = $(this).val(); 
    }); 

</script> 

Answer 4

$(function(){ 
    $('#selDrink').change(function(){ 
     window.location.href = $(this).val(); 
    }); 
});