jQuery Set Multiple Options Selected - JavaScript

When it comes to setting multiple options selected using jQuery and JavaScript, there are several ways to do it. In this article, we will explore some of the most commonly used methods to achieve this.

Method 1: Using the jQuery .prop() method

One of the easiest and most widely used methods to set multiple options selected is by using the jQuery .prop() method. This method allows you to set one or more properties for the selected elements.

Here is an example code snippet using this method:

$('#selectBox option[value="option1"], #selectBox option[value="option2"], #selectBox option[value="option3"]').prop('selected', true);

In the above code snippet, we are selecting three options with the values "option1", "option2" and "option3" and setting their selected property to true.

Method 2: Using the jQuery .attr() method

Another method to set multiple options selected is by using the jQuery .attr() method. This method allows you to get or set an attribute value for the selected elements.

Here is an example code snippet using this method:

$('#selectBox option[value="option1"], #selectBox option[value="option2"], #selectBox option[value="option3"]').attr('selected', 'selected');

In the above code snippet, we are selecting the same three options as in Method 1 and setting their selected attribute to "selected".

Method 3: Using the JavaScript loop

You can also achieve the same result using a JavaScript loop. This method is useful when you need to select options based on some conditions.

Here is an example code snippet using this method:

var selectBox = document.getElementById("selectBox");
for (var i = 0; i < selectBox.options.length; i++) {
  if (selectBox.options[i].value == "option1" || selectBox.options[i].value == "option2" || selectBox.options[i].value == "option3") {
    selectBox.options[i].selected = true;
  }
}

In the above code snippet, we are using a for loop to loop through all the options in the select box and setting the selected property of the options with the values "option1", "option2" and "option3" to true.

Conclusion

These are some of the most commonly used methods to set multiple options selected in jQuery and JavaScript. Depending on your requirements and the complexity of your code, you can choose the method that best suits your needs.