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

问题描述 投票：0回答：1

我正在创建选择框来选择选项，我的选项有隐藏和显示输入字段的条件。我的问题是，如何写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，就像下面的示例图片一样。

Output 1

如果我选择$category_id数字是2，就会显示4个输入div，就像下面的示例图片。

Output 2

javascript php show-hide
1个回答
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.