根据使用 javascript 从下拉列表中的选择更改 php 中表单的元素答案

【问题标题】：Change elements of a form in php based on the selection from a drop-down list using javascript根据使用 javascript 从下拉列表中的选择更改 php 中表单的元素
【发布时间】：2020-01-22 00:17:37
【问题描述】：

根据部门选择，我已经预先定义了要在表格中使用的设备列表。当我选择一个部门时，设备清单需要相应地改变。该脚本似乎根本没有被调用。

在 HTML 中：

<select name="department_id" onchange="updateEquipmentList()" >
    <option value="2">Department 2</option>
    <option value="3">Department 3</option>
    <option value="4">Department 4</option>
</select>

在 Javascript 中：

<script>
    function updateEquipmentList()
    {
        var myDepartment = document.getElementById("department_id").value;
        switch(myDepartment){
            case 2:
                equipment_list = <?php echo $equipment_2; ?>
                break;
            case 3:
                equipment_list = <?php echo $equipment_3; ?>
                break;
            case 4:
                equipment_list = <?php echo $equipment_4; ?>
                break;
        }
        <?php $str_equipment_list = "<script>document.write(equipment_list);</script>"; ?>
    }
</script>

【问题讨论】：

标签： javascript php dropdown

【解决方案1】：

这是完整的代码

<?php
$equipment_2 = 'Hammer';
$equipment_3 = 'Tape';
$equipment_4 = 'Cutter';
?>
<!DOCTYPE html>
<html>
<head></head>

<body>
<div >
    <select id="department_id" name="department" onchange="updateEquipmentList()" >
    <option value="2">Department 2</option>
    <option value="3">Department 3</option>
    <option value="4">Department 4</option>
</select>
</div>


<script>
    function updateEquipmentList()
    {
        var myDepartment = document.getElementById("department_id").value;
        var equipment_list = '';
        switch(myDepartment){
            case '2':
                equipment_list = '<?php echo $equipment_2; ?>';
                break;
            case '3':
                equipment_list = '<?php echo $equipment_3; ?>';
                break;
            case '4':
                equipment_list = '<?php echo $equipment_4; ?>';
                break;
            default:
                equipment_list = 'Nothing';

        }
        document.write(equipment_list);

    }
</script>
</body>
</html>

【讨论】：