Есть два способа решить эту проблему, в зависимости от размера вашего набора данных. Если записей с $parentid не так много (из кода серверной части, также ознакомьтесь с SQL инъекцией, вы вставляете данные пользователя в запрос SQL), вы можете просто проверить параметры перед отправкой (при запросе страницы формы) и отображать или скрывать элементы с помощью JS в зависимости от выбранной опции. Это имеет то преимущество, что не требует дополнительных запросов.
Если у вас много записей в таблице filing_code_managment, вам не следует проверять их все заранее, так как это будет очень ресурсоемко, и 90% проделанной работы никто никогда не увидит. В этом случае вы можете использовать AJAX, чтобы связаться с сервером и проверить, какие поля будут отображаться или скрыты в зависимости от результата. Это решение имеет то преимущество, что проверяет только те параметры, которые используются, но оно приводит к задержке, поскольку запрос должен быть завершен до того, как пользователь сможет заполнить следующие поля.
Обновление с примером для первого варианта
Пример первого варианта в вашем коде внешнего интерфейса:
<div class="form-group">
<label for="cp1" class="control-label col-lg-4">Move to Sub Folder/New Category<span
style="color:red;"> *</span></label>
<div class="col-lg-3">
<select class="form-control blank" id="parentid" name="parentid" title="parentid">
<option >Please Select</option>
<option value="0">New Category</option>
<?php
$sql_incharge = 'SELECT * FROM filing_code_management WHERE status = 1 ORDER BY id';
$arr_incharge = db_conn_select($sql_incharge);
// Test array, I don't have your database
// $arr_incharge = [
// ['category_id' => '0', 'id' => '0', 'name' => 'Nummer 0'],
// ['category_id' => '1', 'id' => '1', 'name' => 'Nummer 1'],
// ['category_id' => '2', 'id' => '2', 'name' => 'Nummer 2']
// ];
$show = [];
foreach ($arr_incharge as $rs_incharge) {
$folder_location = $rs_incharge['folder_location'];
$category_id = $rs_incharge['category_id'];
echo '<option value="' . $rs_incharge['id'] . '">' . $rs_incharge['name'] . '</option>';
// Added
switch ($category_id) {
case '0':
$fc = true;
$fn = true;
$ac = false;
$an = false;
break;
case '1':
$fc = false;
$fn = false;
$ac = true;
$an = true;
break;
case '2':
$fc = true;
$fn = true;
$ac = true;
$an = true;
break;
}
// Save in one big array, to use in JS later
$show[$rs_incharge['id']]['show_fc'] = $fc;
$show[$rs_incharge['id']]['show_fn'] = $fn;
$show[$rs_incharge['id']]['show_ac'] = $ac;
$show[$rs_incharge['id']]['show_an'] = $an;
}
?>
</select>
<!--<input type="text" class="form-control blank" id="parentid" name="parentid" title="parentid" onblur="capitalize(this.id, this.value);">-->
</div>
</div>
<div class="form-group" id="show_hide_fc">
<label for="function_code" class="control-label col-lg-4">Function Code:</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="function_code" name="function_code" title="function_code">
</div>
</div>
<div class="form-group" id="show_hide_fn">
<label for="function_name" class="control-label col-lg-4">Function Name:</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="function_name" name="function_name" title="function_name">
</div>
</div>
<div class="form-group" id="show_hide_ac">
<label for="activity_code" class="control-label col-lg-4">Activity Code:</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="activity_code" name="activity_code" title="activity_code">
</div>
</div>
<div class="form-group" id="show_hide_an">
<label for="activity_name" class="control-label col-lg-4">Activity Name:</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="activity_name" name="activity_name" title="activity_name">
</div>
</div>
<script>
// Added, add this after the inputs
const fc = document.getElementById('function_code');
const fn = document.getElementById('function_name');
const ac = document.getElementById('activity_code');
const an = document.getElementById('activity_name');
const select = document.getElementById('parentid');
const show = JSON.parse('<?= json_encode($show) ?>');
updateVisibility();
select.addEventListener('change', function () {
updateVisibility();
});
function updateVisibility() {
const currentOption = show[select.options[select.selectedIndex].value];
if (typeof currentOption !== 'undefined' && currentOption !== null) {
if (currentOption.show_fc) {
fc.style.display = '';
} else {
fc.style.display = 'none';
}
if (currentOption.show_fn) {
fn.style.display = '';
} else {
fn.style.display = 'none';
}
if (currentOption.show_ac) {
ac.style.display = '';
} else {
ac.style.display = 'none';
}
if (currentOption.show_an) {
an.style.display = '';
} else {
an.style.display = 'none';
}
} else {
// Hide everything when no known option is selected
fc.style.display = 'none';
fn.style.display = 'none';
ac.style.display = 'none';
an.style.display = 'none';
}
}
</script>