JQuery函数-在select元素上执行onload-inline 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>

查询

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
});