How to trigger a button when combo box value changed-CodePudding

In my ASP.NET MVC application, there is a combo box that holds the main request types.

When the combo box values are changed by the user, shows and hides the partial views it's related to.

I want to know that each partial view contains buttons and when it clicks then the contains are loaded within the partial view. So is there any way of doing that when changing the combo box value, by default I want to load the contains be load. I can load it like a partial view but for this program, it is necessary to click on the button because every partial view that user clicks comes with a reference number from the controller.

This is the combo box how coded.

<div >
    @Html.LabelFor(model => model.ReqType, htmlAttributes: new { @class = "control-label col-md-3" })
    <div >
        @Html.DropDownListFor(model => model.ReqType, ReqTypes, "Select Request Type", new { @class = "js-dropdown", id = "ReqType" })
        @Html.ValidationMessageFor(model => model.ReqType, "", new { @class = "text-danger" })
    </div>
</div>

This is how I hide and show the partial views according with the combo box selected value

$('#ReqType').change(function () {

      if ($(this).val() == '1') {
        $('#pnlPurchaseEmp').show();
        $('#pnlPurchaseItem').show();
        $('#pnlGeneralItms').hide();
        $('#pnlSuspenseDetails').hide();
        $('#SusMain').empty();
        $('#PayVMain').empty();
        $('#ReqSettle').empty();
        $('#PayVExpen').empty();
        $('#PayBill').empty();
        $('#PayBillS').empty();
      }
}

So this is the partial view contains loading section, as an example if the combobox value ==1 then the $('#pnlPurchaseEmp').show(); this will show and in that this button is there, So when $('#pnlPurchaseEmp').show(); this start to show I want to trigger this addAnotherEmp button also

<fieldset id="pnlPurchaseEmp" style="display:@(Model.PurchasingEmpList == null || Model.PurchasingEmpList.Count == 0 ? " none" : "" )">
  <ul id="RequEmp" style="list-style-type: none"> @if (Model != null && Model.PurchasingEmpList != null) { foreach (Asp_PASMVC.Models.PurchasingEmpl Emp in Model.PurchasingEmpList) { Html.RenderPartial("_PurchaseEmployees", Emp); } } </ul>
  <button type="button" id="addAnotherEmp"  href="#">Add New Record</button>
  <script type="text/javascript">
    $(function() {
      $("#addAnotherEmp").click(function() {
        $.get('/AppRequests/PurchaseEmpList', function(template) {
          $("#RequEmp").append(template);
        });
      });
    });
  </script>
  <br />
</fieldset>

CodePudding user response：

Try this one

$('#ReqType').change(function () {
  if ($(this).val() == '1') {
    $('#pnlPurchaseEmp').show(0, 
        function() {// show with callback function
          $('#addAnotherEmp').trigger('click');
        });         
     }
  });