Display an alert message with JavaScript when an option is selected.

I would like to display an alert when a certain option in a multi-select drop down is selected. The script I am using is below, but the alert box pops up each time something is selected after the one I specify, and I want it to only pop-up when the one option I specify is selected.

For example, if the user selects "77", the alert pops up, but if they also make other selections in the list, the alert continues to pop up. I only want it to pop up when they are selecting 77.

Can someone assist?
	var selServiceType = document.getElementById("MySelectList");
	var selectedStuffArray = new Array();
   	for (i = 0; i < selStuff.options.length; i++) {
		if (selStuff.options[ i ].selected) {
	    	selectedStuffArray.push(selStuff.options[ i ].value);
	   		}
	   }

    allSelectedStuff = selectedStuffArray.join(',');

    if(allSelectedStuff.includes(77)){
        alert("My Message");
    	}
}

Open in new window

earwig75Asked:
Who is Participating?
 
Julian HansenCommented:
Many ways to do this
HTML
<select id="test" multiple name="test">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Pick Me</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

Open in new window

jQuery
Intercepts click - checks to see if option is selected and has a particular value - then fires the alert if both are true
$(function() {
	$('#test option').click(function() {
		if (this.value == 3 && this.selected) alert('You got me!');
	});
});

Open in new window

JavaScript 1
Get the <select> and add event listener to specific item
window.addEventListener('load', function() {
  var s = document.getElementById('test');
  var o = s.getElementsByTagName('option');
  o[2].addEventListener('click', function() {
    if (this.selected) {
      alert('You got me!');
    }
  });
});

Open in new window


JavaScript2
Bind to the option(s) that have the data-message attribute and show that message.
HTML (adds data-message attribute)
<select id="test" multiple name="test">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" data-message="Yippee">Pick Me</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

Open in new window

window.addEventListener('load', function() {
  var s = document.getElementById('test');
  var o = s.getElementsByTagName('option');
  for(var i = 0; i < o.length;i++) {

    if (o[i].dataset.message) {
      o[i].addEventListener('click', function() {
        if (this.selected) 
          alert(this.dataset.message);
      });
    }
  }
});

Open in new window

Working sample here (jQuery version)
0
 
earwig75Author Commented:
Perfect, thank you.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.