根据下拉列表选择更改文本区域的字体

Question

我的 html 文件中有一个下拉列表和一个文本区域，代码如下

<select id='ddlViewBy' name='ddlViewBy' onchange='applyfonttotextarea()'>
<option value = '1'>Arial</option>
<option value = '2' selected = 'selected'>Comic Sans</option>
<option value ='3'>Courier New</option>
</select>"

现在在上面的代码中，我在下拉列表中添加了一个 onchange 方法作为 applyfonttotextarea() 在这种方法中，我需要在 javascript 中编写一个逻辑来在文本区域中应用选定的字体样式。 如何编写该函数。

例如。在 textarea 中，我输入了“Hello Friends. How are You？”，我在其中选择了“Hello”一词并从下拉列表中选择 Courier New 选项，textarea 的“Hello”应该是 Courier New 字体。任何建议?

Answer 1

一个简单的解决方案是为您的<select> 元素实现一个change 事件处理程序，其中：

1. 标识该<select> 的新选择选项
2. 阅读所选选项的文本
3. 将该文本作为活动字体系列应用到您要更新的<textarea>

在代码中可以这样实现：

document.getElementById('ddlViewBy').addEventListener('change', function(event) {
  
  /* Get select element of change event */
  const selectElement = event.currentTarget;
  
  /* Get selected option (step 1) */
  const selectedOption = selectElement.options[selectElement.selectedIndex];
  
  /* Get font family name from selected option's text (step 2) */
  const fontFamily = selectedOption.text;
  
  /* Get text area, and update it's fontFamily style (step 3) */
  document.getElementById('myTextarea').style.fontFamily = fontFamily;
  
});

<select id='ddlViewBy' name='ddlViewBy'>
  <option value='1'>Arial</option>
  <option value='2' selected='selected'>Comic Sans</option>
  <option value='3'>Courier New</option>
</select>
<br/>
<textarea id="myTextarea">some text</textarea>

另请注意，这种方法意味着不再需要 onchange='applyfonttotextarea()' 的内联绑定。

希望有帮助！