How to make the selected values in a dynamic drop down lists remain selected?

Question

I have 5 drop down lists and a submit button. Every content of the drop down list is depend on the selection value of the previous drop down list. I would like to make sure that the selected value for the every drop down list remain selected even after the submit button is being clicked. Can anyone help me in this? I saw a site that does that but was made in ASP.NET, i prefer tu use PHP, javascript

<script type="text/javascript">
function changeSelect(lang, num, valueElement, nameSelect, nameSpan, dataSup, endId){
    var boxName =  document.getElementById(nameSelect);
    var hackIeSpan =  document.getElementById(nameSpan);
    var contentOption = $.ajax({
          url: "select.php",
          global: false,
          type: "POST",
          data: {
                 lang : lang,
                 num : num,
                 select : valueElement,
                 dataSup : dataSup,
                 endId : endId
             },
          dataType: "html",
          async:false,
          success: function(msg){
        }
       }
    ).responseText;
    hackIeSpan.innerHTML = contentOption;
}

<form id="searchForm" method="post" action="search.php?search&page=0&lang=<?php echo $lang; ?>">
            <fieldset>

                <select name="sort" onchange="changeSelect('<?php echo $lang; ?>', 1, this.value, 'type_list', 'hackIeType', 'null', 'null'); return true;">
                    <option value="0"><?php echo trad('SEARCH_01', $lang); ?></option>
                    <option value="Rental"><?php echo trad('SEARCH_01a', $lang); ?></option>
                    <option value="Sale"><?php echo trad('SEARCH_01b', $lang); ?></option>
                </select>

                <span id="hackIeType">
                    <select name="type_list">
                        <option value="0"><?php echo trad('SEARCH_04', $lang); ?> ...</option>
                    </select>
                </span>

.......

<span id="hackIeSleeps">
                    <select name="bedrooms">
                        <option value="0"><?php echo trad('SEARCH_05', $lang); ?> ...</option>
                    </select>
                </span>
                <span id="spanEndId">
                    <input id="endId" name="endId" type="hidden" value="" /> 
                </span>

                <input id="submit_search_home" type="submit" value="<?php echo trad('BTNSEARCH', $lang); ?>" />

            </fieldset>

Answer 1

What happens when you press the submit button? Do you end up back on the same page? You just need to give the required option a selected="selected" attribute, based on the values sent in $_POST .

As an example (this may not work for you, depending on exactly what happens when you press submit):

<form id="searchForm" method="post" action="search.php?search&page=0&lang=<?php echo $lang; ?>">
  <fieldset>
    <select name="sort" onchange="changeSelect('<?php echo $lang; ?>', 1, this.value, 'type_list', 'hackIeType', 'null', 'null'); return true;">
      <option value="0"<?php if ($_POST['name'] === '0') echo ' selected="selected"'; ?>><?php echo trad('SEARCH_01', $lang); ?></option>
      <option value="Rental"<?php if ($_POST['name'] == 'Rental') echo ' selected="selected"'; ?>><?php echo trad('SEARCH_01a', $lang); ?></option>
      <option value="Sale"<?php if ($_POST['name'] == 'Sale') echo ' selected="selected"'; ?>><?php echo trad('SEARCH_01b', $lang); ?></option>
    </select>
    <span id="hackIeType">
<?php

  if ($_POST['name'] === '0') {
   // The first select value is default, so we can just output a standard select
   // to be populated by AJAX

?>
      <select name="type_list">
        <option value="0"><?php echo trad('SEARCH_04', $lang); ?> ...</option>
      </select>
<?php

  } else {
   // The first select is populated, so copy the logic that generates your second
   // select from 'select.php' and put it here, then output it
  }

?>
   </span>

.......

    <span id="hackIeSleeps">
<?php

  if ($_POST['type_list'] === '0') {
   // The second select value is default, so we can just output a standard select
   // to be populated by AJAX

?>
      <select name="bedrooms">
        <option value="0"><?php echo trad('SEARCH_05', $lang); ?> ...</option>
      </select>
<?php

  } else {
   // The second select is populated, so copy the logic that generates your third
   // select from 'select.php' and put it here, then output it
  }

?>
    </span>
    <span id="spanEndId">
      <input id="endId" name="endId" type="hidden" value="" /> 
    </span>
    <input id="submit_search_home" type="submit" value="<?php echo trad('BTNSEARCH', $lang); ?>" />
  </fieldset>