如何使动态下拉列表中的选定值保持选中状态？

Question

我有 5 个下拉列表和一个提交按钮。下拉列表的每一项内容都取决于前一个下拉列表的选择值。我想确保每个下拉列表的选定值即使在单击提交按钮后仍保持选中状态。任何人都可以帮助我吗？ 我看到一个这样做的网站，但它是用 ASP.NET 制作的，我更喜欢你使用 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

当您按下提交按钮时会发生什么？你最终回到同一页面吗？您只需根据$_POST 中发送的值，为所需选项提供selected="selected" 属性。

举个例子（这可能不适合您，具体取决于您按下提交时发生的具体情况）：

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