Javascript 选择下拉选项后填充输入文本框时出现问题

我想根据用户通过下拉菜单选择的选项填充一些输入字段

下拉菜单的HTML：

 <label>Select a Template </label>
 <select name="mailTemplates" class="form-control">
 <option id="placeOrder" value="">Place Order</option>
 <option id="cancelOrder" value="">Cancel Order</option>
 <option id="reqInfo" value="">Request Information</option>
 <option value="" disabled selected>-- Select a Mail Template --</option>
 </select>


<label>Subject</label>
<input id="subject" class="form-control " type="text" name="subject" placeholder="Subject of your email"/>

---

当用户选择“下单”选项时，应在#主题中填入“测试主题”。

您可以检查所选选项的

id

，以及

change（）

，如下所示：

$（文档）.ready（函数（）{
$（“#邮件模板”）.change（函数（）{
var optionId=$（“选项：选中”，this.attr（'id'）；
如果（optionId=='placeOrder'）{
$（“受试者”）.val（“受试者”）；
}
其他的
$（“#主题”）.val（“”）；
});
});

选择一个模板
下单
取消订单
请求信息
--选择邮件模板--
主题
并需要突出显示，不需要使用此答案在
选项上设置
id
。因此，删除所有选项/s id/@Pedram，然后如何跟踪这是要检查的特定选项？@Mamun正确的方法是为选项/s id/设置值，并按值获取。顺便说一句，它可以通过id/s正常工作，但值为空？那你的身份证呢？所以最好删除id并填充值。@Pedram，我理解你们的观点，但我不想在更大的上下文中更改OP的内容……谢谢你们的观点。
$(document).ready(function(){
$("#placeOrder").on('click', function(){
            $("#subject").val("Test Subject");
        });
});