如何在不刷新页面的情况下更新多选内容？答案

【问题标题】：How to update multiple select content without refreshing page?如何在不刷新页面的情况下更新多选内容？
【发布时间】：2020-08-02 04:02:07
【问题描述】：

我不知道如何解决这个问题，所以我需要一些帮助。
我有 3 个选择框，每个选择框的内容都来自文本文件。

从 customer.txt 中选择 1 个列表
select1 选择中的select2 列表+“_location.txt”
select3 列表来自 select1 选择 + select2 选择 + "_device.txt"

select 2 will update when select1 change, and select3 update when select2 change

请帮助如何使它工作？

这是我的代码：

        <table width=100% border="0" cellpadding="1" >
    <tr>
    <td>
    <label class="description" for="element_21">Customer </label>
    <div>
    <select name="select1" id="select1" >
        <option selected value="base">Choose Customer</option>
       <?php foreach($customerlines as $custlines){ 
            echo "<option value='".$custlines."'>$custlines</option>";
            $lokasi = "config/".$custlines."_lokasi.txt";   //txt file for select2 list
            $lokasilines = file($lokasi, FILE_IGNORE_NEW_LINES);
            }?>
    </select>
    </div>
    </td>
    <td>
    <label class="description" for="element_21">Location</label>
    <div>
    <select name="select2" id="select2">
        <option selected value="base">Choose Location</option>
       <?php
       foreach($lokasilines as $loclines){ 
            echo "<option value='".$loclines."'>$loclines</option>";
            $device = "config/"."_".$loclines."_device.txt";    //txt file for select3 list
            $devicelines = file($device, FILE_IGNORE_NEW_LINES);

            }?>
    </select>
    </div>
    </td>
    <td>
    <label class="description" for="element_21">Device</label>
    <div>
    <select name="select3" id="select3">
        <option selected value="base">Choose Device</option>
       <?php 
        foreach($devicelines as $devlines){ 
        echo "<option value='".$devlines."'>$devlines</option>";        
        }?>
    </select>
    </div>
    </td>
    </tr>
    </table>

这是 select1 的 txt 文件

<?php
    error_reporting(E_ALL);
    ini_set('display_errors',1);
    $customer = 'config/customer.txt';
    $customerlines = file($customer, FILE_IGNORE_NEW_LINES);
?>

【问题讨论】：

为此，您需要使用 javascript。仅 PHP 是不够的，因为它是一种服务器端语言。在这里，阅读本教程w3schools.com/jsref/event_onchange.asp
谢谢Chilarai。是的，我尝试使用 onchange ，但我的第二个选择仍然没有更新。我想通过 select1 的值更改第二次选择的 txt 文件。
你也需要发布你的javascript代码

标签： php onchange multiple-select selectionchanged

【解决方案1】：

我在 select1 处添加 onchange

    <br>
    
    <table width=100% border="0" cellpadding="1" >
    <tr>
    <td>
    <div class='form-group'>
    <label class="description" for="element_21">Customer </label>
    <select class='form-control' name="select1" id="select1" onchange="selectloc(event)" >
        <option selected value="base">Pilih Customer</option>
       <?php foreach($customerlines as $custlines){ 
            echo "<option value='".$custlines."'>$custlines</option>";
            }?>
    </select>
    </div>
    </td>
    <td>
    <div class='form-group'>
    <label class="description" for="element_21">Lokasi</label>
    <select class='form-control' name="select2" id="select2" >
        <option selected value="base">Pilih Lokasi</option>
       <?php
       foreach($lokasilines as $loclines){ 
        echo "<option value='".$loclines."'>$loclines</option>";
        }?>
    </select>
    </div>
    </td>
    <td>
    <div class='form-group'>
    <label class="description" for="element_21">Perangkat</label>
    <select class='form-control' name="select3" id="select3" >
        <option selected value="base">Pilih Perangkat</option>
       <?php
        foreach($devicelines as $devlines){ 
        echo "<option value='".$devlines."'>$devlines</option>";        
        }?>
    </select>
    </div>
    </td>
    </tr>
    </table>

我可以得到select1的值。但是如何使用这个值来处理 select2 的文本文件呢？

<script>
function selectloc(event) {

    var selectElement = event.target;
    var locvalue = selectElement.value;
     //"You selected: " + locvalue;
    //document.getElementById("select1").innerHTML = "You selected: " + locvalue;
    alert(locvalue);
    $lokasi = "config/".locvalue."_lokasi.txt";
    $lokasilines = file($lokasi, FILE_IGNORE_NEW_LINES);
    
}</script>

【讨论】：