How do I fill a combobox from a PHP variable in HTML?

UB
May 15, 2023
276 views
0 votes
2 Answers

I am new with php, js, ajax and html and I have a problem as described below:
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 combobox1 and I want to reset combobox 2 and fill it with other values from the database. I use an MVC handler to do this.
Can you please help me, I am totally confused how to do this.
Thank you

<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>

Answers

- Amigoways
- May 15, 2023 at 12:58 pm
- 0 votes
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();
}

});

});
```
Login or Signup to reply.

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.

Please signup or login to give your own answer.

Click here to cancel reply.