Изменить параметры Ajax Post и вернуть HTML на основе чередующихся зависимых выпадающих

Question

У меня есть 3 выпадающих списка, содержащих значения, которые заполняются при загрузке страницы

<select class='form-control' id='make' placeholder='Make:'>
<select class='form-control' id='model' placeholder='Model:'>
<select class='form-control' id='version' placeholder='Version:'>

У меня есть функция, которая обновляет значения в «других» выпадающих меню, которые не нажимаются, в зависимости от значениявыпадающий список, по которому щелкают, но эта функция повторяется 3 раза для каждого раскрывающегося списка

$('#model').change(function(){
    let selectedModel = $(this).val();
    $.ajax({
        url: 'php/dropdown.php',
        type: 'POST',
        data: {model: selectedModel},
        success:function(data)
        {  $('#make').html('');
           $('#version').html('');
            let makeJSON = JSON.parse(data)[0];
            let versionJSON = JSON.parse(data)[2];

            for (let i = 0; i < makeJSON.length; i++) {
                if (makeJSON[i].mMake!= '' && makeJSON[i].mMake!= null) {
                    $('#make').html($('#make').html() + '<option value="' + makeJSON[i].mMake + '">' + makeJSON[i].mMake + '</option>');
                }
            }

            for (let i = 0; i < versionJSON.length; i++) {
                if (versionJSON[i].mVersion != '' && versionJSON[i].mVersion != null) {
                    $('#version').html($('#version').html() + '<option value="' + versionJSON[i].mVersion + '">' + versionJSON[i].mVersion + '</option>');
                }
            }

        }
    });
});

И PHP выглядит примерно так:

$model = $_REQUEST['model'];

$sqlupdateModel = "SELECT DISTINCT mMake, mVersion FROM Cars WHERE mModel = '$model';
$stmtModel = sqlsrv_query( $conn, $sqlupdateModel);
if( $stmtModel === false)
{
    die( print_r( sqlsrv_errors(), true));
}
$updateModel = [];
while( $row = sqlsrv_fetch_array( $stmtModel, SQLSRV_FETCH_ASSOC)){
    $updateModel[] = $row;
}
echo json_encode(array($updateMake, $updateModel, $updateVersion));

... и все это работаетХорошо, в основном, я ищу более простое решение для повторного использования функции (как JS, так и PHP) вместо того, чтобы переписывать ее 3 раза!

С точки зрения того, что я пытался сделать,

$('#make, #model, #version').change(function(){
let columnValue = $(this).val();
.......
data: {model: columnValue},
success:function(data)
{$(this).html(''); //this doesn't work obviously!

После этого я в снукере

Answer 1

Это должно работать на стороне JS, вам нужно проверить функцию отображения для ответа

$('#make, #model, #version').change(function(ev){
    let selected = $(this).val();
    let id = ev.target.id;
    let data = {};
    data[id] = selected;
    $.ajax({
        url: 'php/dropdown.php',
        type: 'POST',
        data: data,
        success:function(data)
        {  
           let options = ['make', 'model', 'version']
           const response = {
             make: JSON.parse(data[0].map(make => make.mMake)),
             model: JSON.parse(data[1].map(make => make.mModel)),
             version: JSON.parse(data[2].map(make => make.mVersion))
           }

           options.filter(option => option !== id).forEach(option => setDropdown(option, response[option]));
        }
    });
});
function setDropdown(id, data) {
    const id = `#${id}`
    $(id).html('');
    for (let i = 0; i < data.length; i++) {
        if (data[i] != '' && data[i] != null) {
                $(id).html($(id).html() + '<option value="' + data[i] + '">' + data[i] + '</option>');
        }
    }
}