如何将选择选项值更改为字体样式脚本的下拉 <a></a> 标签？

Question

我在这里使用选择选项标签来更改我的文本区域的字体样式。

但是，这种外观与我的工具不匹配，我希望它位于 Bootstrap 下拉列表中。

我想要这个：

//Font select
const fontsSelect = document.getElementsByClassName('fonts-select')[0],
    styledTextArea = document.getElementsByClassName('styledTextarea')[0];
    fontsSelect.addEventListener('change', function() {
    styledTextArea.style.fontFamily = fontsSelect.value;

});

<select class="form-control form-control-sm fonts-select">
    <option selected disabled>Select font...</option>
    <option value="Arial">Arial</option>
    <option value="Cambria">Cambria</option>
    <option value="Courier">Courier</option>
    <option value="Calibri">Calibri</option>
    <option value="Futura">Futura</option>
    <option value="Franklin Gothic">Franklin Gothic</option>
    <option value="Garamond">Garamond</option>
    <option value="Helvetica">Helvetica</option>
    <option value="Rockwell">Rockwell</option>
    <option value="Times New Roman">Times New Roman</option>
    <option value="Verdana">Verdana</option>
</select>
            
<textarea class="styledTextarea" rows="15" placeholder="Write something.."></textarea>

看起来像这样：

<ul>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdowntools" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Fonts</a>
<div class="dropdown-menu fonts-select" aria-labelledby="dropdowntools">

<a selected disabled>Select font...</a>
<a value="Arial">Arial</a>
<a value="Cambria">Cambria</a>
<a value="Courier">Courier</a>
<a value="Calibri">Calibri</a>
<a value="Futura">Futura</a>
<a value="Franklin Gothic">Franklin Gothic</a>
<a value="Garamond">Garamond</a>
<a value="Helvetica">Helvetica</a>
<a value="Rockwell">Rockwell</a>
<a value="Times New Roman">Times New Roman</a>
<a value="Verdana">Verdana</a>

</div>
</li>
</ul>

我一直在尝试尝试它，但没有运气。我不知道如何将这个styledTextArea.style.fontFamily = fontsSelect.value; 定位为“链接值”

这可以在没有提交按钮的情况下完成吗？

如果有任何帮助，我将不胜感激。谢谢！

编辑： Here's a working fiddle 使用选择选项 还有here's the output我想实现

Answer 1

@ixcode，您没有任何提交按钮，因此程序将更改字体样式。