0

I'm trying to have an option 'popup' more option when click on. I am new to javascript, CSS and HTML, so I apologize before hand for the code error

so I have used onclick option on javascript but it doesn't work, I don't know what am I doing wrong. "panelIss" is a href to another htm file that would bring the other options.

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

Ideally what I want is as soon as you click "Panel" more option would be listed underneath it.

Edgar Ramírez Mondragón
  • 2,912
  • 3
  • 19
  • 34
fburgos
  • 1
  • 1
  • use onchange on the select, not onclick on the option – Patrick Evans Dec 20 '18 at 01:06
  • check out [this](https://stackoverflow.com/questions/37261126/dependent-select-menus-in-html-and-javascript) and [this](https://stackoverflow.com/questions/29623225/javascript-dependent-drop-down-list/29624809) – Hafiz K Dec 20 '18 at 01:14

1 Answers1

0

<option> elements don't fire the click event in all browsers, you should stay away from relying on this.

However you can use onChange() on select, and check the selected value.

<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>
Love2Code
  • 898
  • 1
  • 7
  • 13