jQuery和选择标签HTML不改变页面答案

【问题标题】：jQuery and select tag HTML not changing pagejQuery和选择标签HTML不改变页面
【发布时间】：2018-10-08 05:48:31
【问题描述】：

currently, I'm trying to have the user select a font from the drop-down box and when the pick lets say Times New Roman, all the text on the page changes to that font.我已经掌握了基础知识，但我无法弄清楚展示位置的顺序。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
  //text
   $("#font option:selected").val();

  </script>
</head>

<body>
<div id="about_turtles">
  <center><p>This is a test</p></center>
</div>

<div id="font_buttons">
  <select id="font">
  <option value="helvetica">Helvetica</option>
  </select>
</div>

【问题讨论】：

标签： jquery html select drop-down-menu

【解决方案1】：

你可以使用这个简单的代码：

 $(document).ready(function(){

$('#font').change(function(){
var font = $(this).val();

$('*').css("font-family", font);
});


});

【讨论】：

【解决方案2】：

从看起来你只能获得所选内容的价值。

但是我认为您所追求的是事件侦听器。像这样的：

$("#font").change(function () {
    var family= this.value;
    $("#about_turtles").css("font-family",family);
  });

我还将字体系列名称存储在您选择列表中每个选项元素的值中。

Working JSFiddle

看看这个以获得更多帮助：jQuery changing font family and font size

【讨论】：