菜单更改页面信息

我试图在提交选择后在同一页面上更改下一页上的信息的多个下拉框菜单。菜单更改页面信息

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

这是我发现的最接近的东西，但试图获得下一页上的信息反而变得棘手。

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

来源

2013-05-19 user2397946

POST数据发送到服务器而不是返回给客户端。这意味着您的JavaScript代码将永远不会看到提交的内容。你需要做任何你想要的服务器端（即在PHP中），或者你需要改变你发送和读取数据的方式（即通过URL的哈希部分，通过cookie，...）。使用服务器端语言最有可能是一个更好的选择，尽管它取决于您尝试实现的目标。

来源

2013-05-19 01:37:45

菜单更改页面信息

回答

相关问题