字體大小不會隨着選擇/下拉框變化

Question

我有一個簡單的<select>不同字體大小的下拉框，並且我試圖用id="textDiv"更改div中某些文本的字體大小。但它並不真正起作用。我以前從未使用過元素，所以請幫助我。

HTML

<select name="fontSize" size="1" id="sizeSelector"> 
    <option value="" selected> 12px </option> 
    <option value="1"> 14px </option> 
    <option value="2"> 16px </option> 
    <option value="3"> 20px </option> 
    <option value="4"> 24px </option> 
    <option value="5"> 28px </option> 
    <option value="6"> 34px </option> 
    <option value="7"> 40px </option> 
    <option value="8"> 46px </option> 
    <option value="9"> 44px </option> 
    <option value="10"> 66px </option> 
    <option value="11"> 88px </option> 
</select> 

jQuery的

$('select').change(function(){ 
    var size = $(':selected').val(); 
    $('#textDiv').css('font-size', size); 
}); 

我相信的東西是錯誤與Jquery的邏輯。由於

Answer 1

這一個

$('select').change(function(){ 
    var size = $(this).val(); 
    $('#textDiv').css('font-size', size+'px'); 
}); 

Answer 2

如果你做一個簡單的console.log(size)，你會發現，你是選擇的選項，而不是它的文本值。你需要做的這個選擇文本：

var size = $(':selected').text(); 

Answer 3

你得到的匹配:selected頁面的所有元素，所以如果你有在此之前，任何其他下拉列表中，你反而會先在得到所選擇的選項結果。您可以使用this作爲上下文來限制當前下拉內的搜索。

您都可以從使用val方法選項的值，但選項不是一個表單字段，那麼你可以使用attr方法來獲取value屬性：

var size = $(':selected', this).attr('value'); 

然而，這更容易從選擇中獲得的價值：

var size = $(this).val(); 

你會做出選項的值對應的大小，但如果這是不可能的，你需要使用該選項的文字和忽略的價值：

var size = $(':selected', this).text();