Javascript 更改字体取决于选择选项标记

我有很强的意志力，但很难实现。这是其中之一。我有一个名为

标题
的输入表单：

<input id="caption" type="text" name="caption" placeholder="Caption" maxlength="30"/>

现在，我想使用
选择选项
标记更改
标题
的字体：

<select id="font" name="font">
   <option value="kalam" selected="selected">Kalam</option>
   <option value="handlee">Handlee</option>
   <option value="pacifico">Pacifico</option>
</select>


卡拉姆
汉德利
帕西菲科

我的问题是，如何根据选择的选项值更改字体系列

例如：
我在
输入标题字段
上输入值，它会自动显示在
日期容器
上，然后我想在
选择选项
中将默认字体更改为另一种字体。但是保持
标题
显示，这样就可以更改字体系列。谢谢
 有一个
选中的
CSS伪选择器


选项：选中{
字体家族：幻想；
}
选择权{
字体系列：无衬线；
}

猫
狗
它需要js或jquery：

<script>
   $('#font').change(function(){
     $('#caption').css('font-family', $('#font').val());
   });
</script>


$（'#font'）。更改（函数（）{
$（'标题'）.css（'字体系列'，$（'字体'）.val（））；
});

在页面的
标记中添加jquery文件，添加以下内容：

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>



并在选择和文本框后处理我的代码。
到目前为止您尝试了什么？你在哪里尝试更改字体？@NewToJS我不知道怎么做，所以我问了它..好吧，如果你想要一个纯javascript解决方案，也许类似的东西会有所帮助。如果您已经有了jQuery，那么Farzin Kanzi的答案将更简短/更清晰，但我建议您做一些研究，尝试自己的东西，然后提交一个问题，其中包含您遇到问题的源代码。@NewToJS谢谢！答案越多，我学到的知识就越多；）这会如何改变字体或以任何方式回答问题？看起来不一样presentable@jao此代码根据问题根据所选选项标记更改字体系列css属性我的问题是，如何根据所选的选项值更改字体系列？@GilangRizkie用一段代码更新了这个问题，以保持清晰。没关系，谢谢大家的关注。。已解决；）@哈利姆福德特内特汉克斯！这对你来说很容易。。这个问题对我来说很难解决：（不客气。但是我的英语不好，我不明白它有用吗？：）
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>