How to set the selected value of multi-select using JQuery

The multi-select function in JQuery is very common, and setting the selected value is also part of the JQuery multi-select operation. Using JQuery to set the selected value can quickly implement operations, improve user convenience, and enable various complex functional requirements.

This article will introduce how to use JQuery to set the selected value of multi-selection, and use examples to assist understanding.

1. Basic operations of JQuery multi-selection

Before starting to introduce setting the selected value, you need to understand the basic operations of JQuery multi-selection.

1. Get the selected value

Getting the selected value of the multi-select box in JQuery is very simple and can be quickly achieved by just using the val() method. For example:

var selectVal = $('input[type=checkbox]:checked').val();

The above code will select the selected option of type checkbox, then get the selected value and save it in the selectVal variable.

2. Set the selected state

When you need to set the selected state of multiple options, just use the prop() or attr() method. For example:

$('input[type=checkbox]').attr('checked', true);

The above line of code will set all options of type checkbox to selected.

3. Get the selected quantity

Getting the selected quantity is also very simple, just use the length of the selected item array, for example:

var count = $('input[type=checkbox]:checked').length;

2. How to set the selected item Value

After understanding the basic multi-selection operation, let’s introduce how to set the selected value of multiple options.

1. Set the selected value of multi-selection

To set the selected value of multi-selection, you need to first determine the content and option value of the selected item. For example:

<input type="checkbox" name="color" value="red">红色
<input type="checkbox" name="color" value="yellow">黄色
<input type="checkbox" name="color" value="blue">蓝色

In the above code, the options whose name attribute is color are multiple options, and the corresponding value of each item is red, yellow and blue respectively.

It is also very simple to set the checked status of an option through JQuery. You only need to set the checked attribute of the corresponding option to true. For example:

$('input[name=color][value=red]').prop('checked', true);

The above code will set the option whose name attribute is color and value is red to the selected state.

2. Get the selected value of multiple selections

To get the selected value of multiple selections, you need to filter out the selected options within the entire multi-selection group, and use the value values ​​of these options as the result and add them to an array. For example:

var selected = [];
$('input[name=color]:checked').each(function() {
  selected.push($(this).val());
});

The above code will traverse the selected options whose name attribute is color, and add the value of each option to the array selected.

3. Practical Case

The most common scenario of using JQuery to set the selected value of multiple options is form operation. The following is a practical case so that everyone can better apply the knowledge they have learned.

1. HTML code

<form>
  <label><input type="checkbox" name="hobby" value="swim">游泳</label>
  <label><input type="checkbox" name="hobby" value="run">跑步</label>
  <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
  <label><input type="checkbox" name="hobby" value="football">足球</label>
  <label><input type="checkbox" name="hobby" value="tennis">网球</label>
  <label><input type="checkbox" name="hobby" value="badminton">羽毛球</label>
</form>

2. Set the selected value and get the selected value

// 设置选中值
$("form input[name=hobby][value=run]").prop("checked", true);
$("form input[name=hobby][value=football]").prop("checked", true);

// 获取选中值
var hobbyArr = [];
$("form input[name=hobby]:checked").each(function(){
  hobbyArr.push($(this).val());
});
console.log(hobbyArr); // ["run", "football"]

The above code sets the name attribute to hobby and the value to run and football respectively. The option is selected and all selected values ​​are stored in an array for output.

4. Summary

The above is an introduction to setting the selected value of multi-select option in JQuery. Through the examples in this article, readers can better understand the basic operations of JQuery multi-selection and how to set the selected value of multiple options. As an excellent JavaScript framework, JQuery's powerful operations and convenient syntax make web development more efficient.

The above is the detailed content of How to set the selected value of multi-select using JQuery. For more information, please follow other related articles on the PHP Chinese website!