触发选择事件

Question

我正在使用我的代码从服务器获取数据并使用输入和标签显示它。

我唯一的问题是，当我进入页面时，没有触发选择更改，因此我没有得到任何数据。 让它运作的唯一方法是选择其他选项并再次选择相同的选项，以便触发更改事件。 $('#selectMRPC').trigger('change');无效。

如何在页面加载时执行selectorMRPC()和$('#selectMRPC').change？

$(document).ready(function () {

    selectorMRPC();
    $('#selectMRPC').trigger('change');

    $('#selectMRPC').change(function () {
        //fetch data
        var mrpc = $(this).find('option:selected').data('mrpc');

        $('#paramBody').empty();
        for (var i = 1; i <= 10; i++) {
            var field = mrpc["field" + i];
            if (field !== undefined) {
                var parsedField = field.split('_');
                var value = parsedField[0];
                var type = parsedField[1];

                switch (type) {
                    case  "S":
                        type = "text";
                        if (value === '""')
                            value = null;
                        break;
                    case "B":
                        type = "checkbox";
                        break;
                    case "N":
                        type = "number";
                        value = parseInt(value);
                        break;
                    case "D":
                        type = "number";
                        value = parseInt(value);
                        if (value === '""')
                            value = null;
                        break;
                }
                //else use checkbox
                if(type === "checkbox")
                {
                    $('#paramBody').append('<tr><td>' + i + '</td><td>' + type + '</td><td><div class="checkbox checkbox-primary">' +
                        '<input class="text-center" id="field'+i+'" name="Fields" type="checkbox" value="' +value + '"><label for="field'+i+'"></label></div></tr>');
                }
                else
                {
                    $('#paramBody').append('<tr><td>' + i + '</td><td>' + type + '</td><td><input class="text-center" name="Fields" type="' + type + '" value="' +value + '"></tr>');
                }
            }
        }
    });


    function selectorMRPC() {
        $.ajax({
            type: 'post',
            url: 'IndividualSimulator',
            success: function (result) {
                $('#selectMRPC').empty();
                JSON.parse(result).forEach(function (mrpc) {
                    var option = $('<option>', {
                        value: mrpc.name,
                        text: mrpc.name
                    });

                    //Persist data with option
                    option.data('mrpc', mrpc);

                    $('#selectMRPC').append(option);
                });
            },
            error: function () {

            }
        });
        return false;
    }
});

Answer 1

  

如何制作我的selectorMRPC（）和$（＆＃39;＃selectMRPC＆＃39;）。   页面加载时执行？

从你的代码和评论中，以下似乎是序列

• selectorMRPC()为data-mrpc
创建option属性
• 当change事件触发时，它会查找data-mrpc属性
• 但是你似乎在AJAX成功发生之前触发change事件

将其设为以下

$(document).ready(function() {
  selectorMRPC(); //notice that only this method is invoked
});

function selectorMRPC() {
  $.ajax({
    type: 'post',
    url: 'IndividualSimulator',
    success: function(result) {
      $('#selectMRPC').empty();
      JSON.parse(result).forEach(function(mrpc) {
        var option = $('<option>', {
          value: mrpc.name,
          text: mrpc.name
        });
        //Persist data with option
        option.data('mrpc', mrpc);

        $('#selectMRPC').append(option);
      });
      $('#selectMRPC').change(function() {
        //fetch data
        var mrpc = $(this).find('option:selected').data('mrpc');
        //rest of the code removed for simplification
      });
      $('#selectMRPC').trigger('change');

    },
    error: function() {

    }
  });
  //return false; this line doesn't make sense
}