Question

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

下拉菜单的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"/>

点击功能的JQuery：

$(document).ready(function(){
$("#placeOrder").on('click', function(){
            $("#subject").val("Test Subject");
        });
});

当用户选择“下订单”选项时，它应使用“测试主题”填充#subject input box。

Answer 1

您可以查看所选选项的id以及change()，如下所示：

＆＃13;

$(document).ready(function(){
  $("#mailTemplates").change(function(){
    var optionId = $("option:selected", this).attr('id');
    if(optionId == 'placeOrder'){
      $("#subject").val("Test Subject");
    }
    else
      $("#subject").val("");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select a Template </label>
  <select name="mailTemplates" id="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"/>

＆＃13;

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

1 个答案: