JQuery 函数 - 执行 onload - 在选择元素上内联 javascript

Question

我有 3 个选择下拉列表，它们根据之前使用 Jquery 和 Ajax 的选择动态填充。当使用 onchange 事件处理程序完成新表单条目时，这一切都工作正常。

我需要使用相同的表单来显示数据库中的现有数据，并使用正确的选项填充选择下拉列表，以便可以更新它们。

我认为通过在 onload 事件上调用相同的 JQuery 函数，这将相当简单。然而，显然 onload 函数不适用于选择。

有人能想办法解决这个问题吗？

注意：一页上可能有多行和选择，因此需要将 this 对象值传递给 getFeatures() 函数。

HTML

    <h4 class="row">Line: 1</h4>
    <label for="REF">Réf<br>
    <input type="text" value="D04001B" id="REFCIALE" name="14[REFCIALE]"></label><label for="ARTCLASSID">Identifiant de la classe<br>
    <select id="ARTCLASSID_14" onchange="getFeatures(this)" class="ARTCLASSID" name="14[ARTCLASSID]"><option value="">---</option><option value="1" selected="">EC003024 - Fitting with 2 connections </option><option value="2">EC003025 - Fitting with 3 connections </option><option value="3">EC003026 - Fitting with 4 connections </option></select></label>
    <label for="FEATUREID">FEATUREID<br>
    <select id="FEATUREID_14" onchange="getFeatures(this)" class="FEATUREID" name="14[FEATUREID]"><option value="">---</option></select></label>
    <label for="FVALUE">Valeur<br>
    <select id="FVALUE_14" onchange="getFeatures(this)" class="FVALUE" name="14[FVALUE]"><option value="">---</option></select></label>
<label for="ARTCLASSVERSION">Version de la classe<br><input type="text" value="7.0" id="ARTCLASSVERSION" name="14[ARTCLASSVERSION]"></label></div>

<h4 class="row">Line: 2</h4>
<label for="REFCIALE">Référence commerciale<br><input type="text" value="D04001B" id="REFCIALE" name="15[REFCIALE]"></label>
    <label for="ARTCLASSID">Identifiant de la classe<br>
    <select id="ARTCLASSID_15" onchange="getFeatures(this)" class="ARTCLASSID" name="15[ARTCLASSID]"><option value="">---</option><option value="1" selected="">EC003024 - Fitting with 2 connections </option><option value="2">EC003025 - Fitting with 3 connections </option><option value="3">EC003026 - Fitting with 4 connections </option></select></label>
    <label for="FEATUREID">FEATUREID<br><select id="FEATUREID_15" onchange="getFeatures(this)" class="FEATUREID" name="15[FEATUREID]"><option value="">---</option></select></label>
    <label for="FVALUE">Valeur<br><select id="FVALUE_15" onchange="getFeatures(this)" class="FVALUE" name="15[FVALUE]"><option value="">---</option></select></label>
    <label for="ARTCLASSVERSION">Version de la classe<br><input type="text" value="7.0" id="ARTCLASSVERSION" name="15[ARTCLASSVERSION]"></label>

JQUERY

function getFeatures(selectObject){
    alert("getFeatures is loaded");
    var id = selectObject.id;
    var value = selectObject.value;  
    var data = {
        'action': 'get_etim_features',
        'nonce': ajax_object.nonce, 
        'selectid': id,
        'optionid': value,
    };

    jQuery.ajax({
        url: ajax_object.ajax_url,
        type: 'post',
        data: data,
        dataType: 'json',
        success:function(response){
            var selectid = response.selectid;
            var options = response.options;  
            var len = options.length;
            var nextselect = jQuery('#'+ selectid ).closest('label').next().find('select'); 
            jQuery(nextselect).empty();
            
            for( var i = 0; i<len; i++){
                var id = options[i]['ID'];
                var code = options[i]['code'];
                var desc = options[i]['description'];
                var name = code + ' - ' + desc;
                jQuery(nextselect).append("<option value='"+id+"'>"+name+"</option>");
            }
        }
    });

} 

Answer 1

我认为你需要的是 .change() (https://api.jquery.com/change/)

$('#select1').change(() )=> {
    //fill the select2 with the correct options
});