How to display alert when option from form is selected?-CodePudding

I have an HTML form that has 32 options to pick from with different categories hence the optgroup tags. I need to make it so that when I click on the form and then on the option, then the value of the option will be displayed. The issue is that if I click on an option that is already choosen for that form, the alert doesn't appear. I need to be able to click on the default option and have it store my data in a javascript variable and I am scared that my default choice won't be stored unless I see that the alert has been triggered which tells me the value of the variable. I have tried a few different event listeners to no avail. This is my HTML code snippet:

    <form>
      <label for="teams"> C1</label>
      <select name="teams" id="userInput" onchange="team()">
        <optgroup label ="Foo">
          <option value="Foa">Fooa</option>
          <option value="Fob">Foob</option>
          <option value="Foc">Fooc</option>
        </optgroup>
      </select>
      </form>
      <form>

This is in a separate JS file:

function team(){
  let inputy = document.getElementById("userInput").value;
  alert(inputy);
}

I tried to have an alert when a form option was selected. I tried using the onlick() event, but it would display the option that is in the box by default and not what I selected.

CodePudding user response：

Use : select.options[select.selectedIndex] try below code,

<html>
   <body>

    <form>
      <label for="cars">Choose a car:</label><br>
      <select id="cars" onchange="showAlert()">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
       </select>
    </form> 

  <script>
  function showAlert() {
    var select = document.getElementById("cars");
    var selectedOption = select.options[select.selectedIndex];
    alert("You have selected the option with value: "   
    selectedOption.value   " and text: "   selectedOption.text);
  }
  </script>

  </body>
</html>

CodePudding user response：

Since your listener is on the select element you're essentially using event delegation - attaching one listener to a parent element to catch events from its children as they "bubble up" the DOM. Here you can use click.

Once a click event has been captured the handler needs to work out if the element that fired the event is an option element, and only run the rest of the code if it is. You can do that check with matches. Opening the select won't fire the event, but subsequent clicks on the options will.

Note: in this example I've removed the inline JS to the JS file, and used addEventListener which is considered better practice.

// Cache the element, and add an event listener to it
const select = document.querySelector('#userInput');
select.addEventListener('click', handleClick);

function handleClick(e) {

  // Check to see if the clicked element
  // is an option element, and then log/alert it
  if (e.target.matches('option')) {
    const { value } = e.target;
    console.log(value);
  }
}

<form>
  <label for="teams"> C1</label>
  <select name="teams" id="userInput">
    <optgroup label="Foo">
      <option value="Foa">Fooa</option>
      <option value="Fob">Foob</option>
      <option value="Foc">Fooc</option>
    </optgroup>
  </select>
</form>

Additional documentation

event.target