如何隐藏和显示有条件的输入框？

Question

我创建了选择框来选择选项，我的选项有条件隐藏和显示输入字段。我的问题是如何编写 if else 逻辑来检查 $category_id 值以显示和隐藏在 后端页面的输入 div 中。希望有人能指导我如何解决它。谢谢。

下面是我的代码：

前端页面：

<div class="form-group">
                    <label for="cp1" class="control-label col-lg-4">Move to Sub Folder/New Category<span style="color:red;">&nbsp;*</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);
                        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>';

                        }
                        ?>
                        </select> &nbsp;&nbsp;
                                        <!--<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="cp1" 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="cp1" 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="cp1" 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="cp1" 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>

后端页面：

<?php
$parentid = $_POST['parentid'];
$sql5 = 'select folder_location,name,category_id from filing_code_management where id='. $parentid;
$arr_sql5 = db_conn_select($sql5);
foreach ($arr_sql5 as $rs_sql5) {
$sub_category_name = $rs_sql5['name'];
$folder_location = $rs_sql5['folder_location'];
$categoryID= $rs_sql5['category_id'];
}
$show_hide_fc = $_POST['show_hide_fc'];
$show_hide_fn = $_POST['show_hide_fn'];
$show_hide_ac = $_POST['show_hide_ac'];
$show_hide_an = $_POST['show_hide_an'];
 if ($category_id == '0') {
    // $show_hide_fc will show
    // $show_hide_fn will show
    // $show_hide_ac  style display = 'none';
    // $show_hide_an  style display = 'none';

} else if ($category_id == '1') {
    // $show_hide_fc style display = 'none';
    // $show_hide_fn style display = 'none';
    // $show_hide_ac  will show
    // $show_hide_an  will show
} else if ($category_id == '2') {
    // $show_hide_fc will show
    // $show_hide_fn will show
    // $show_hide_ac  will show
    // $show_hide_an  will show
}
?>

例如，如果我选择 $category_id 数字为 1，它将显示两个输入 div，如下面的示例图片。

如果我选择 $category_id 数字为 2，它将显示 4 个输入 div，如下面的示例图片。

Answer 1

有两种方法可以解决这个问题，具体取决于数据集的大小。如果$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;">&nbsp;*</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>