如何在没有 JS 的情况下检查从多个选择中更改了哪个 HTML 选择


How to Check which HTML Select from Multiple Selects changed without JS

不知道为什么在实践中这行不通,但我正在尝试在提交后重新加载页面,但有多个<select>

每个都有自己的名称,但我怎么知道哪个在$_POST上被更改了,而不给每个选择自己的形式。

这是当前代码:

<form id="productSelectedForm" action="products.php?filter=true" method="post">
  <input type="hidden" name="model" value="<?php echo $item['model']; ?>" />
  <ul>
    <li>
      <label><strong>Select available Grade: </strong>
        <select id="gradeSelect" class="propChanged" name="grade" onchange="this.form.submit();">
          <?php foreach( $props[ 'grade'] as $g) { ?>
          <option value="<?php echo $g; ?>">
            <?php echo $g; ?>
          </option>
          <?php } ?>
        </select>
      </label>
    </li>
    <li>
      <label><strong>Select available Colour:</strong>
        <select id="colourSelect" class="propChanged" name="colour" onchange="this.form.submit();">
          <?php foreach( $props[ 'colour'] as $g) { ?>
          <option value="<?php echo $g; ?>">
            <?php echo $g; ?>
          </option>
          <?php } ?>
        </select>
      </label>
    </li>
    <li>
      <label><strong>Select available Storage:</strong>
        <select id="storageSelect" class="propChanged" name="storage" onchange="this.form.submit();">
          <?php foreach( $props[ 'storage'] as $g) { ?>
          <option value="<?php echo $g; ?>">
            <?php echo $g; ?>
          </option>
          <?php } ?>
        </select>
      </label>
    </li>
    <li>
      <label><strong>Select available Network:</strong>
        <select id="networkSelect" class="propChanged" name="network" onchange="this.form.submit();">
          <?php foreach( $props[ 'network'] as $g) { ?>
          <option value="<?php echo $g; ?>">
            <?php echo $g; ?>
          </option>
          <?php } ?>
        </select>
      </label>
    </li>
  </ul>
</form>

有什么方法可以在不使用 Javascript 和我缺少的单个表单的情况下做到这一点吗?

谢谢

艾迪

从您给定的 PHP 中可以看出,您没有为 SELECT 元素预先选择某个选项,因此浏览器将默认选择第一个。

然后,当用户提交表单时,您无法区分对第一项的自愿、有意识的选择,或者用户是否只是更改了另一个SELECT而没有对此项执行任何操作。

我建议在每个SELECT开始时都有一个空选项,并且具有空的VALUE属性,如下所示:

      <option value=""><option>
      <?php foreach( $props[ 'grade'] as $g) { ?>
      <option value="<?php echo $g; ?>">
        <?php echo $g; ?>
      </option>
      <?php } ?>

然后,当您处理$_POST数据时,您将知道如果值不为空,用户是否做出了显式选择,例如:

if (!empty($_POST['grade'])) {
    // a grade was specified by the user.
}

保持状态

尽管您的代码似乎没有跟踪以前所做的选择,但您可能希望这样做,因此您应该以某种方式存储这些以前的选择。一旦你能够做到这一点,你将能够通过将以前的值与当前提交的值进行比较来找出更改的内容。

您可以使用会话变量来跟踪用户的选择:

session_start();
// detect change and remember current selections
$changed = array();
foreach (array("grade", "colour", "storage", "network") as $key) {
    if (isset($_POST[$key])) {
        if (empty($_SESSION[$key]) || $_POST[$key] != $_SESSION[$key]) {
            $changed[] = $key;
        }
        $_SESSION[$key] = $_POST[$key];
    } else {
        $_SESSION[$key] = "";
    }
}

运行此代码后,您将在数组$changed具有更改值的项目列表(例如 ["存储"])。通常,一次应该不可能更改多个值(因为您在更改时立即提交),但谁知道呢......

然后在表单中,您应该确保用户保持先前选择的项目处于选中状态,例如,用于成绩:

    <select id="gradeSelect" class="propChanged" name="grade" onchange="this.form.submit();">
      <?php foreach( $props[ 'grade'] as $g) { ?>
      <option value=""></option>
      <option value="<?php echo $g; ?>"
            <?php if ($g == $_SESSION["grade"]) echo " selected "; ?>
        >
        <?php echo $g; ?>
      </option>
      <?php } ?>
    </select>