Question

我试图在单击时有一个选项“弹出”更多选项。我是javascript，CSS和HTML的新手，所以我对代码错误表示歉意

所以我在javascript上使用了onclick选项，但是它不起作用，我不知道我在做什么错。 “ panelIss”是另一个htm文件的href，它将带来其他选项。

<form action="/action_page.php">
  <fieldset>
    <legend>Equipment Status</legend>
    Select Equipment:
    <select>
      <option value=none>-Select from list-</option>
      <option
        value="panel"
        onclick="document.getElementById('panelIss').innerHTML"
      >
        Panel
      </option>
      <option value="doorWindsens">Door/Window sensor</option>
      <option value="camera">Camera</option>
      <option value="doorbell">Door Bell Camera</option>
    </select>   
  </fieldset>
</form>

理想情况是，只要单击“面板”，我想要的就是它下面的更多选项。

Answer 1

<option>元素不会在所有浏览器中触发click事件，因此应避免依赖于此。

但是，您可以在选择项上使用onChange()，并检查选择的值。

<script>
        function changeFunc() {
            var e = document.getElementById('viewby');
            var answer = e.options[e.selectedIndex].text;

            //alert(answer);

            if(answer == 'Panel') {
                // do something
            }
        }
    </script>

    <form action="/action_page.php">
    <fieldset>
    <legend>Equipment Status</legend>
    Select Equipment:
    <select onchange="changeFunc(this);" id="viewby">
    <option value=none>-Select from list-</option>
    <option value="panel">Panel</option>
    <option value="doorWindsens">Door/Window sensor</option>
    <option value="camera">Camera</option>
    <option value="doorbell">Door Bell Camera</option>
    </select>   
    </fieldset>

有没有一种方法可以单击一个选项，然后在其下方弹出另一个选项？

1 个答案: