Displaying a notification for a multi-selection using JavaScript

Question

Displaying a notification for a multi-selection using JavaScript

I need help with a piece of Html code I have. It's a list of countries, and what I want is to show an alert when one or more countries are selected to display which ones were chosen. I'm working with JavaScript only and don't want to use Jquery or PHP.

 <select name= "countrylaw">
         <option value = "1">Afghanistan</option>
         <option value = "2">Albania</option>
         <option value = "3">Algeria</option>
         <option value = "4">Andorra</option>
         <option value = "5">Angola</option>
         <option value = "6">Antigua & Deps</option>
         <option value = "7">Argentina</option>
         <option value = "8">Armenia</option>

Below is my JavaScript code, but it doesn't seem to be working:

        var select1 = document.getElementsByName("country");
        var selected1 = [];
        for (var i = 0; i < select1.length; i++)
        {
         if (select1.options[i].selected) 
            {
                 alert("File Selected for " + select1.options[i].value +" ")

            }
        }

javascript

Answer 1

Answer №1

To capture user selection changes, it is recommended to utilize the onchange event in this manner:

var select = document.getElementsByTagName("select")[0];

select.onchange = function(){
    if(select.selectedIndex == -1) return null;   // ensure an option is selected

    // Display the text of the currently selected option
    alert(select.options[select.selectedIndex].text); 
}

DEMO

Your initial test used a for-loop for a single run. To cater to dynamic user selections, implementing an event listener like onchange is essential.

Answer 2

To capture user selection changes, it is recommended to utilize the onchange event in this manner:

var select = document.getElementsByTagName("select")[0];

select.onchange = function(){
    if(select.selectedIndex == -1) return null;   // ensure an option is selected

    // Display the text of the currently selected option
    alert(select.options[select.selectedIndex].text); 
}

DEMO

Your initial test used a for-loop for a single run. To cater to dynamic user selections, implementing an event listener like onchange is essential.

Answer 3

Answer №2

If you want your select box to allow multiple selections, just include the multiple attribute in it.
To execute a javascript function every time the user changes their selection, add the onchange attribute:

<select name="countrylaw" multiple onChange="showSelectedCountry(this)">
         <option value = "1">Afghanistan</option>
         <option value = "2">Albania</option>
         <option value = "3">Algeria</option>
         <option value = "4">Andorra</option>
         <option value = "5">Angola</option>
         <option value = "6">Antigua & Deps</option>
         <option value = "7">Argentina</option>
         <option value = "8">Armenia</option>
</select>

Next, create the callback function:

showSelectedCountry = function(select){
    for(var i = 0; i < select.selectedOptions.length; i++){
        alert(select.selectedOptions[i].innerHTML);
    };
}

You can view the demonstration on jsFiddle.

Answer 4

If you want your select box to allow multiple selections, just include the multiple attribute in it.
To execute a javascript function every time the user changes their selection, add the onchange attribute:

<select name="countrylaw" multiple onChange="showSelectedCountry(this)">
         <option value = "1">Afghanistan</option>
         <option value = "2">Albania</option>
         <option value = "3">Algeria</option>
         <option value = "4">Andorra</option>
         <option value = "5">Angola</option>
         <option value = "6">Antigua & Deps</option>
         <option value = "7">Argentina</option>
         <option value = "8">Armenia</option>
</select>

Next, create the callback function:

showSelectedCountry = function(select){
    for(var i = 0; i < select.selectedOptions.length; i++){
        alert(select.selectedOptions[i].innerHTML);
    };
}

You can view the demonstration on jsFiddle.

Displaying a notification for a multi-selection using JavaScript

Answer №1

DEMO

Answer №2

Similar questions

Automatically modify browser configurations to disable document caching

Tips for encoding AngularJS ng-model in real-time

Tips for populating an array with information gathered from an axios request within a React application

Instructions for resolving the Sys.ArgumentTypeException error: The object of type 'Object' cannot be converted to type 'Function'

Executing a JavaScript function through a hyperlink created by an AJAX request

Generate JSON on-the-fly with ever-changing keys and values

Employing jQuery Mobile with MVC3 for seamless auto-submit functionality

MUI: Transforming the uncontrolled value state of Select into a controlled one with a new component

socket.io initialization and finalization events

Struggling with the loading of intricate attribute data into an array of arrays

"Creating a function within a knockout viewmodel that is populated with JSON data: A step-by-step guide

Disable the time selection feature in the text input field

Utilizing jQuery to select an attribute containing a special character

Attempting to showcase a collection of values, specifically focusing on highlighting the even numbers within the array

Is it possible for parameters to still be filled even when they start off empty

Symfony is unable to access uploaded files from an AngularJS interface

Error: Unable to perform 'getComputedStyle' on the 'Window' object: the first parameter must be of type 'Element'

Updating the color of text when clicking on a link using javascript

MVC4: Exploring the Strategy for Handling Nested Ajax Requests

Creating packaging for a node-webkit application