How do I make all values in html select element selected using Javascript

Question

In Html have two select tags, the first contains all the worlds countries, the second contains only the countries selected by user.


     
                            
                                
                                    
                                        Preferred Release Countries

The user selects them by highlighting and then click on button which invokes the following Javascript function.

function add_preferred_countries() {
     allCountries      = document.getElementById('preferred_countries_all');
     selectedCountries = document.getElementById('preferred_countries_selected');
     var length=$('#preferred_countries_all option:selected').length;
     if(length==0) { 
        return false;
     }

     $('#preferred_countries_all option:selected').each(function(){
        $('#preferred_countries_selected').append($(this));
     });
     //selectedCountries.value = "";


      for (var i = 0; i < selectedCountries.options.length; i++) { 
             selectedCountries.options[i].selected = selected; 
    } 
}

' That bits works fine, but I have realized that when I finally submit the form containing this and various other options that it will send items in the select list that are actually selected. So in the absence of a better solution I want to automatically select all values in the preferred_countries_selected whenever user adds new countries, so that when user submits form the preferred countries will be sent to server

I thought this would work, but has no effect

for (var i = 0; i < selectedCountries.options.length; i++) { 
                 selectedCountries.options[i].selected = selected;

I know the existing function has some JQuery in it, but I would prefer pure javascript solution as I don't really understand JQuery syntax.

Ideally I would prefer to do this just as they press submit, but that is another question.

Scott Marcus · Accepted Answer

You have some HTML validation issues with your table and you really should not use inline CSS or HTML event attributes (i.e. onclick) as they have many harmful side-effects.

See the inline comments in the code snippet below and note that you need the checked CSS pseudo-class, rather than selected:

// Get references to the two lists
var allCountries = document.getElementById('preferred_countries_all');
var selectedCountries = document.getElementById('preferred_countries_selected');

function add_preferred_countries(operation) {

  if(operation === "add"){
       // Get the selected countries from list one into an array
  var allPreferredSelected = Array.prototype.slice.call(allCountries.querySelectorAll('option:checked'));
     
  // Loop over the array
  allPreferredSelected.forEach(function(selOption){
    selectedCountries.appendChild(selOption);  // Add each to the second list
  });
 
  // Loop through the second list and select each option
  Array.prototype.slice.call(selectedCountries.querySelectorAll("option")).forEach(function(opt){
    opt.selected = "selected";
  });
    console.log("Item added");
  } else {
    // Do remove operation here
// Loop over the selected countries in the second list
Array.prototype.slice.call(selectedCountries.querySelectorAll("option:checked")).forEach(function(opt){
        selectedCountries.removeChild(opt);  // Remove country
    });

    console.log("Item removed");
  }
}

// Get the add and remove buttons into an array and loop over the array
Array.prototype.slice.call(document.querySelectorAll("button[id^='preferred_countries']")).forEach(function(btn){
  // Set up a click event handler for the button
  btn.addEventListener("click", function(){
    add_preferred_countries(this.dataset.action);  // Call the add/remove function with the right arg
  });
});

/* Do your styling separate from the HTML */
button[id^='preferred_countries'] { width:100px; }
select { width:200px; height:20em; }


  
    
      
        
          Preferred Release Countries

How do I make all values in html select element selected using Javascript

Answers (1)

Related Questions