How to set a PHP session value as selected onclick on a drop down list

Question

I have the following code.

<?php
     session_start();
?>
 <form action = "index.php" method = "post" name = "test">
    <!--<div id ="custom-select" style="width:200px;" onchange = "favsports()"> -->
       <div class = "custom-select">
        <div class = "select">
           <select id ="custom-select" name = "custom-select" style="width:200px;" onchange = " this.form.submit(); myFunction();">
                <option value="Abteilung auswählen" <?php if(isset($_POST['custom-select']) && $_POST['custom-select'] == 'Abteilung auswählen' || $_SESSION['custom-select'] == 'Abteilung auswählen') echo 'selected="selected" '; ?> >Abteilung auswählen</option>
                <option value="TL-311" <?php if(isset($_POST['custom-select']) && $_POST['custom-select'] == 'TL-311' || $_SESSION['custom-select'] == 'TL-311') echo 'selected="selected" '; ?> >TL-311</option>
                <option value="TP-271" <?php if(isset($_POST['custom-select']) && $_POST['custom-select'] == 'TP-271' || $_SESSION['custom-select'] == 'TP-271') echo 'selected="selected" '; ?> >TP-271</option>
                <option value="TP-310" <?php if (isset($_POST['custom-select']) && $_POST['custom-select'] == 'TP-310' || $_SESSION['custom-select'] =='TP-310') echo 'selected="selected" '; ?> >TP-310</option>
        </select>
       </div>
      </div>
 </form>
<?php

     if (isset($_POST["custom-select"]))
     {
        $_SESSION['custom-select'] = $_POST["custom-select"];
        //print_r($_SESSION);
     }

?>

I am using the same code in two pages because the selected value in the first page schould still be selected when the user go on the next page. I am also using the following Javascript code because the selected value schould be save and useon the Pages.

function myFunction()
{

   var optione = '<?php echo $_SESSION['custom-select']; ?>';
     if(optione !== '')
     {
        document.getElementById("custom-select").value = optione;
     }
       document.getElementById("insert").value = optione;
       var mytext = optione;
     if (mytext == "Abteilung auswählen")
       { 
          alert("Wählen Sie bitte eine gültige Abteilung!");
          mytext = null;
          file = "TL-311";
        }
     else 
        {
          mytext = optione;
          window.file = mytext;
        }
     return window.file;
}

The code is working but my problem is that: I have to select a value twice before setting the selected value and when I want to change the selected value, I must also select the other value twice before setting it as selected. can anyone tell me what I'm doing wrong? or What is actually wrong in my code? Please I am new in PHP and HTML programming.

Answer 1

Maybe this will help:

page1.php

<?php
    header("Content-type: text/html; charset=utf-8");
    session_start();

    // put all your elements into array
    $arr = ['Abteilung auswählen', 'TL-311', 'TP-271', 'TP-310'];
    $options = '';

    // make your options 
    foreach ($arr as $elem) {
        $options .= '<option value="'. $elem. '">'. $elem .'</option>';
    }
?>
<form action="page2.php" method = "post">
<div class = "custom-select">
    <div class = "select">
        <select id ="custom-select" name = "custom-select" style="width:200px;" onchange = " this.form.submit();">
            <?php echo $options; ?>
        </select>
    </div>
</div>

page2.php

<?php
    header("Content-type: text/html; charset=utf-8");
    session_start();

    // check POST and write in SESSION if POST isset
    // otherwise check SESSION and fill variable $custom-select

    if(isset($_POST['custom-select'])) {
        $cust_select = $_POST['custom-select'];
        $_SESSION['custom-select'] = $_POST['custom-select'];
    } else if ($_SESSION['custom-select'] && !empty($_SESSION['custom-select'])) {
        $cust_select = $_SESSION['custom-select'];
    }

    $arr = ['Abteilung auswählen', 'TL-311', 'TP-271', 'TP-310'];
    $options = '';
    foreach ($arr as $elem) {
    // here you will check if custom_element is equal to current element
    // if is equal then put 'selected' in that <option>
        if ($elem == $cust_select) {
            $selected = ' selected';
        } else {
            $selected = '';
        }
        $options .= '<option value="'. $elem. '"'.$selected.'>'. $elem .'</option>';
    }
?>


<form action="" method = "post">
    <div class = "custom-select">
        <div class = "select">
            <select id ="custom-select" name = "custom-select" style="width:200px;" onchange = " this.form.submit();">
                <?php echo $options; ?>
            </select>
        </div>
    </div>
</form>