How to fill combobox from php variable in html

Question

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>

You'd need to use 2 forms - first form includes combobox1 and routes to the same page (so the page will refresh every time the user chooses an option from combobox1), and have a conditional function to show combobox2, in case there is relevant data sent — tola, May 15 '23 at 07:27
Thank you, I understand what you mean, but if i do in this way the first combobox always show the initial state and not anymore the user selected input. is there a way to refresh the second combo out of a array with all values from DB instead of read the db new? — U. B., May 15 '23 at 08:12
I believe it could be done. You'd need to extract from DB all the data relevant to combobox2 - for all possible cases in combobox1. And then you can use jQuery or vanilla js to update combobox2 with an onchange prompt from combobox1. In this scenario, the page won't need to be refreshed, but it's not recommended if you possibly have a lot of overall data relevant to your comboboxes — tola, May 15 '23 at 09:33
thanks. I have just overall 150 data relevant to the second combobox. I have all data from db for the second combobox in a php variable. Can you please post an example how that works? Thanks a lot for your help. — U. B., May 15 '23 at 10:10
I solved my problem with help from a collegue. We read all items in the select list, hide all and show then only the elements which are needed: var chosenField = document.getElementById('cmb_listen_bearbeitung').value; // the value from combobox1 $("#list_list_eintraege > [mytag]").hide(); //combobox 2 $("#list_list_eintraege > [mytag = " + chosenField + "]").show(); — U. B., May 16 '23 at 13:21

score 0 · Answer 1 · edited May 17 '23 at 06:34

0

Need to set class and use each function for reset other than the current selectbox.

Code is here :

$(".yourclassname").click( function(this){
     var selected = $(this);
    
    $(".yourclassname").each( function(this){
       if(selected != $(this))
       {
         $(this).reset();
       }
    });
});

edited May 17 '23 at 06:34

answered May 15 '23 at 10:58

Amigoways

1
2

i do not know why but it is not working, jquery is included – U. B. May 15 '23 at 11:35
check your console and find whether the jquery plugin included – Amigoways May 15 '23 at 11:56
yes, the jquery plugin is included – U. B. May 15 '23 at 12:09
any console error ? if console error means, it would have been like this onchange="GetSelectedListenBearbeitungValue(this,list_list_eintraege)" list_list_eintraege is not defined you have to use GetSelectedListenBearbeitungValue(this,'list_list_eintraege') , the single quote for the second param – Amigoways May 15 '23 at 12:21
i understand, but in the sonsole there comes no error – U. B. May 15 '23 at 13:10
comboBox2.html(''); var options ; optionsArray[chosenField].map( (option, i) => { options += ''; }); comboBox2.append(options ); Try this! – Amigoways May 15 '23 at 14:24

tola · Accepted Answer · 2023-05-15T13:39:59.157

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:

I haven't used jQuery in a long while. You might get a more elegant script with it.
This does NOT answer what you described in the title, rather what I understood you needed from our exchange in the comments. For a PHP fill of <select> with DB data, check this question's answers.

yes, thank you, that is a good way, i have implemnted it in this way, the only problem now I have the onchange is not fired or it is landing elsewhere... :-( i call a lert in the fs funtction, still not displayed — U. B., May 15 '23 at 13:09
Oof, I typed it without the camel case. Should be `onChange`. I'll edit it — tola, May 15 '23 at 13:39
the onchange is not the problem, the problem is the programming in the javascript itself, but i do not know what is the problem (see my code above) — U. B., May 16 '23 at 05:28

score 0 · Answer 3 · answered May 15 '23 at 13:25

<form>
<input type="submit" 
    id="jQueryButton11" 
    name="btn_save_listen_bezeichnung" 
    value="Übernehmen" 
    style="position:absolute;left:46px;top:325px;width:175px;height:32px;z-index:148" 
    tabindex="3">
<div id="bv_Text62" style="margin:0;padding:0;position:absolute;left:356px;top:89px;width:240px;height:15px;text-align:left;z-index:149;">
    <font style="font-size:13px" color="#000000" face="Arial">Liste:</font>
</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="update_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 ($full_data_array->num_rows > 0) {
                while ($row = mysqli_fetch_array($full_data_array)) {
                    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($full_data_array, 0);
            }
        ?>              
    </select>
  
</div>
<script  type="text/javascript">
// 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_list_list_eintraege(){
   var chosenField = document.getElementById('cmb_listen_bearbeitung').value; // the value from combobox1
   var comboBox2 = document.getElementById('list_list_eintraege');

   comboBox2.empty();        
   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);
   });
}
</script>

above the new code, the onchange GetSelectedListenEintragValue works, the update_list_list_eintraege don´t work ????? — U. B., May 15 '23 at 13:26
yes, that´s true. the GetSelectedListenEintragValue is in a .js file, the other function you can see in the code — U. B., May 16 '23 at 04:46

How to fill combobox from php variable in html

3 Answers3