javascript - 字体大小不随选择/下拉框改变

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>

查询

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

我确定 Jquery 逻辑有问题。谢谢

Answer 1

您正在获取页面中与 :selected 匹配的所有元素，因此如果您在此之前有任何其他下拉列表，您将从中获取所选选项而不是结果中的第一个。您可以使用 this 作为上下文来限制当前下拉列表中的搜索。

您正在使用 val 方法从选项中获取值，但该选项不是表单字段，因此您将使用 attr 方法获取值属性:

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

但是，从 select 中获取值更容易:

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

您可以使选项中的值与尺寸相对应，但如果不可能，则需要使用选项的文本并忽略该值:

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