0

我正在尝试在同一页面上有多个下拉菜单，这将在提交选择后更改下一页上的信息。

因此用户可以从菜单中进行不同的和多项选择，然后单击“提交”，不同的信息将出现在下一页上，而不是像下面的脚本一样的页面。

这是我发现的最接近的东西，但试图在下一页上获取信息却被证明是棘手的。

<form>
  <table>
    <tr>
      <td>Person 1</td>
      <td>Information</td>
      <td>
        <select id="choice1" onchange="changeText('choice1', 'display1')">
          <option>Select</option>
          <optgroup label="Category 1">
            <option>G1 Choice1</option>
            <option>G1 Choice2</option>
          </optgroup>
          <optgroup label="Category 2">
            <option>G2 Choice1</option>
            <option>G2 Choice2</option>
          </optgroup>
        </select>
      </td>
    </tr>
    <tr>
      <td>Person 2</td>
      <td>Information</td>
      <td>
        <select id="choice2" onchange="changeText('choice2', 'display2')">
          <option>Select</option>
          <optgroup label="Category 1">
            <option>G1 Choice1</option>
            <option>G1 Choice2</option>
          </optgroup>
          <optgroup label="Category 2">
            <option>G2 Choice1</option>
            <option>G2 Choice2</option>
          </optgroup>
        </select>
      </td>
    </tr> 
  </table>
  <p>&nbsp;</p>
  <table>
    <tr>
      <td><div id="display1">Select an option</div></td>
    </tr>
    <tr>
      <td><div id="display2">Select an option</div></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</form>
<script>
var textBlocks = [
  'Select an option',
  'G1 Choice1 description',
  'G1 Choice2 description',
  'G2 Choice1 description',
  'G2 Choice2 description'
];

function changeText(elemid, displayId) {
  var ind = document.getElementById(elemid).selectedIndex;
  document.getElementById(displayId).innerHTML = textBlocks[ind];
}
</script>
</body>
</html>
4

1 回答 1

0

POST 数据被发送到服务器而不返回给客户端。这意味着您的 JavaScript 代码永远不会看到提交的内容。

您要么需要在服务器端做任何你想做的事情（例如，在 PHP 中），要么您需要更改发送和读取数据的方式（例如，通过 URL 的哈希部分，通过 cookie，...）。使用服务器端语言很可能是更好的选择，尽管它确实取决于您要实现的目标。

于 2013-05-19T01:37:45.983 回答