javascript - 选择列表菜单中的 Jquery 字体系列和大小更改在 Chrome 中不起作用

Question

以下代码在 Firefox 中有效，但在 Chrome 中无效，有什么建议吗？

html:

<select name="fontso" id="fontselect"><option selected="selected">Personalized text font</option>  <option id="dragon_font" value="dragon_is_comingregular">Dragon Is Coming</option> <option id="libre_font" value="Libre Baskerville">Baskerville </option></select>

Jquery:

$('#dragon_font').click(function(){   
$('.word_preview').css('font-family', 'dragon_is_comingregular');
curSize= parseInt($('.word_preview').css('font-size'));
if(curSize==14)
$('.word_preview').css('font-size', 40);
}); 
$('#libre_font').click(function(){   
$('.word_preview').css('font-family', 'Libre Baskerville');
curSize= parseInt($('.word_preview').css('font-size'));
if(curSize>=40)
$('.word_preview').css('font-size', 14);
}); 
});

Answer 1

感谢 A. Wolff 找到了解决方案。

这是更改后的 jquery 代码:

$('#fontselect').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if(valueSelected=='dragon_is_comingregular') {
$('.word_preview').css('font-family', 'dragon_is_comingregular');
$('.word_preview').css('font-size', 40);
}
else if (valueSelected=='Libre Baskerville') {
$('.word_preview').css('font-family', 'Libre Baskerville');
$('.word_preview').css('font-size', 14);
}
});
});