JQuery Radio Button checked and change event-CodePudding

In my asp.MVC application there are two radio buttons and one combo box.

Someone clicked to radiobutton 1, combo box load some data. If clicked to the radiobutton 2, loads different data to the combo box. Script was written using the ajax.

The code is working fine when User click changed the radio buttons. But for some users I have hidden the radiobutton 2. So for them only radiobutton 1 is visible, But at that situation, there is no data loaded to the combo box.

Want to know that also, If there is radiobutton checked when load the view, need to get related data to the combobox.

$(function() {

  $('[id*=ddlTopEmployees]').select2().next().hide();
  $('[id*=Approve_Type]').change(function() {
    setDropDownProductsA($(this).val())
  });
});

function setDropDownProductsA(xVal) {
  try {

    $("#ddlEmployees").empty().trigger("change")
    $.ajax({
      url: '../FindProductTypes',
      type: 'POST',
      dataType: 'json',
      cache: false,
      async: false,
      data: {
        AppLvlId: xVal
      },
      success: function(data) {
        if (data.Success == true) {

          $("#ddlEmployees").select2({
            width: '100%',
            data: JSON.parse(data.items)
          });
        }
      }
    });
  } catch (err) {
    console.log(err.message)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CodePudding user response：

use click instead of change

$('[id*=Approve_Type]').click(function() {
    setDropDownProductsA($(this).val())
  });