Javascript下拉更改样式显示不起作用

Question

我有一个包含 2 行的表格，每行都有一个 ID 来切换可见性:

<table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>'.$text_tier_show.':</td>
        <td>
            <select name="showart" onchange="show_toggle(this.value)">
              <option value="">-- Bitte Show w&auml;hlen --</option>
              <option value="1">Vliesshow</option>
              <option value="2">Tiershow</option>
              <option value="3">Gymkhana</option>
              <option value="4">Nachzucht Hengst</option>
              <option value="5">Nachzucht Stute</option>
            </select></td>
      </tr>
      <tr id="gkanreise" style="display:none;">
        <td></td>
        <td>Gymkhana anreise</td>
      </tr>
      <tr id="nachzucht" style="display:none;">
        <td colspan="2">Nachzuchten</td>
      </tr>
    </table>

默认情况下，两行都是隐藏的，但是当有人点击下拉列表的第三行时，我想显示第一行，而对于下拉列表的第四行和第五行，我想显示第二行。

我使用的 javascript 如下:

function show_toggle(show){
    var g = document.getElementById("gk_anreise");
    var n = document.getElementById("nachzucht");
                g.style.display = 'none';
                n.style.display = 'none';
    switch(show){
      case 3:
                g.style.display = 'block';
        break;
      case 4:
                n.style.display = 'block';
        break;
      case 5:
                n.style.display = 'block';
        break;
    }
}

但是整个事情都不行。不管我在下拉菜单中选择什么，它都没有显示任何内容。 有人能帮助我吗。 预先感谢您的帮助。 bool 齐

Answer 1

更改编号

从 document.getElementById("gk_anreise"); 到 document.getElementById("gkanreise");

同时将 show 从 string 转换为 int

switch(parseInt(show)) {

演示:http://jsbin.com/bimido/1/edit?html,js,output