phpselectionfillbox

How to fill combobox from php variable in html


I have two selection boxes, both filled from database and displayed on a web site(that works for now).

When the user choose an item in first select dropdown, I want to reset second select dropdown and fill it with other values based on the first select dropdown value.

I am using an MVC handler to do this.

<div style="position:absolute;left:356px;top:110px;width:193px;height:17px;border:1px #C0C0C0 solid;z-index:150">
    <select 
        name="cmb_listen_bearbeitung" 
        size="1" 
        id="cmb_listen_bearbeitung" 
        onchange="GetSelectedListenBearbeitungValue(this,list_list_eintraege)"             
        style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
        tabindex="4">
        <?php
            if ($listen->num_rows > 0) {
                mysqli_data_seek($listen, 0);
                while ($row = mysqli_fetch_array($listen)) {
                    unset($listen_id, $bezeichnung);
                    $listen_id = $row['listen_id'];
                    $bezeichnung = $row['bezeichnung'];
                    if ($liste_ausgewaehlt == $listen_id) {
                        echo '<option value="' . $listen_id . '"selected>' . $bezeichnung . '</option>';
                    } else {
                        echo '<option value="' . $listen_id . '">' . $bezeichnung . '</option>';
                    }
                }
                mysqli_data_seek($listen, 0);
            }

        ?>      
    </select>
</div>
<div style="position:absolute;left:356px;top:163px;width:193px;height:134px;border:1px #C0C0C0 solid;z-index:151">
    <select name="list_list_eintraege" 
        size="10" 
        id="list_list_eintraege" 
        onchange="GetSelectedListenEintragValue(this)" 
        style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
        tabindex="5">
        <?php
            if ($listeneintrag->num_rows > 0) {
                while ($row = mysqli_fetch_array($listeneintrag)) {
                    unset($listen_id, $entry_short, $entry_long);
                    $listen_id = $row['listen_id'];
                    if ($listen_id == $liste_ausgewaehlt) {
                        $entry_short = $row['entry_short'];
                        $entry_long = $row['entry_long'];
                        echo '<option value="' . $entry_short . '">' . $entry_long . '</option>';
                    }
                }
                mysqli_data_seek($listeneintrag, 0);
            }
        ?>              
    </select>
</div>

<div style="position:absolute;left:356px;top:110px;width:193px;height:17px;border:1px #C0C0C0 solid;z-index:150">
    <select 
        name="cmb_listen_bearbeitung" 
        size="1" 
        id="cmb_listen_bearbeitung" 
        onchange="GetSelectedListenBearbeitungValue(this,list_list_eintraege)"             
        style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
        tabindex="4">
        <?php
            if ($listen->num_rows > 0) {
                mysqli_data_seek($listen, 0);
                while ($row = mysqli_fetch_array($listen)) {
                    unset($listen_id, $bezeichnung);
                    $listen_id = $row['listen_id'];
                    $bezeichnung = $row['bezeichnung'];
                    if ($liste_ausgewaehlt == $listen_id) {
                        echo '<option value="' . $listen_id . '"selected>' . $bezeichnung . '</option>';
                    } else {
                        echo '<option value="' . $listen_id . '">' . $bezeichnung . '</option>';
                    }
                }
                mysqli_data_seek($listen, 0);
            }

        ?>      
    </select>
</div>
<div style="position:absolute;left:356px;top:163px;width:193px;height:134px;border:1px #C0C0C0 solid;z-index:151">
    <select name="list_list_eintraege" 
        size="10" 
        id="list_list_eintraege" 
        onchange="GetSelectedListenEintragValue(this)" 
        style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
        tabindex="5">
        <?php
            if ($listeneintrag->num_rows > 0) {
                while ($row = mysqli_fetch_array($listeneintrag)) {
                    unset($listen_id, $entry_short, $entry_long);
                    $listen_id = $row['listen_id'];
                    if ($listen_id == $liste_ausgewaehlt) {
                        $entry_short = $row['entry_short'];
                        $entry_long = $row['entry_long'];
                        echo '<option value="' . $entry_short . '">' . $entry_long . '</option>';
                    }
                }
                mysqli_data_seek($listeneintrag, 0);
            }
        ?>              
    </select>
</div>

Solution

  • Based on our exchange in the comments, I'm posting a general code

    Set your relevant data from the DB in a multidimensional array (I'm assuming this is PHP, because this should be data taken from the DB), like so:

    Array
    (
        [<combobox1 option 1 value>] => Array
            (
                [0] => <combobox2 option 1 value> // relevant to combobox1 option 1
                [1] => <combobox2 option 2 value> // relevant to combobox1 option 1
                [2] => <combobox2 option 3 value> // relevant to combobox1 option 1
                // and so on
            )
    
        [<combobox1 option 2 value>] => Array
            (
                [0] => <combobox2 option 1 value> // relevant to combobox1 option 2
                [1] => <combobox2 option 2 value> // relevant to combobox1 option 2
                [2] => <combobox2 option 3 value> // relevant to combobox1 option 2
                // and so on
            )
        // and so forth
    )
    

    javascript part:

    // passing the PHP array to javascript (I'm calling it $full_data_array here)
    <?php foreach($full_data_array as $key => $value): ?>
       let key = "<?= $key; ?>";
       var optionsArray[key] = 
          <?php echo '["' . implode('", "', $value) . '"]' ?>;
    <?php endforeach; ?>
    
    // the onchange function that updates combobox2
    function update_combobox2(){
       var chosenField = document.getElementById('combobox1').value; // the value from combobox1
       var comboBox2 = document.getElementById('combobox2');
       optionsArray[chosenField].map( (option, i) => {
          let opt = document.createElement("option");
          opt.value = i; // the index. you can insert option value instead
          opt.innerHTML = option;
          combobox2.append(opt);
       });
    }
    

    HTML/PHP part:

    <select name="combobox1" id="combobox1" onChange="update_combobox2()">
    // your options (that should also be set as keys in the array above)
    </select>
    <select name="combobox2" id="combobox2">
    // you can throw in a default empty option here
    </select>
    

    NOTES: