How to set the selected value of drop-down box in jquery

In web development, it is often necessary to use drop-down boxes (also called select) to allow users to select some options. Sometimes, we need to preset the options of the drop-down box, that is, a certain option has been selected when the page loads. At this time, we can use jquery to set the selected value of the drop-down box.

jquery is a commonly used JavaScript library, which can simplify the writing of JavaScript code and provide many convenient operation methods. When using jquery to set the selected value of a drop-down box, you need to first obtain the corresponding drop-down box element.

There are many ways to obtain the drop-down box element, which can be obtained according to the id attribute, name attribute, class attribute, etc. of the drop-down box. If the drop-down box has a unique id attribute, you can use $("#id") to get the drop-down box element, as shown below:

var selectBox = $("#selectBox");

If the drop-down box does not have an id attribute, you can use $("select [name=selectName]") to obtain the drop-down box element, where selectName is the name attribute value of the drop-down box:

var selectBox = $("select[name=selectName]");

After obtaining the drop-down box element, you can use jquery to set the selected value of the drop-down box. . jquery provides two methods to set the selected value of the drop-down box, namely the val() and prop() methods.

1. Use the val() method to set the selected value of the drop-down box

The val() method is used to get or set the value of the drop-down box. When the val() method takes no parameters, it means to obtain the value of the currently selected option; when the val() method takes parameters, it means to set the selected value of the drop-down box to the specified value.

The following is an example code that uses the val() method to set the selected value of the drop-down box:

// 获取下拉框当前选中的值
var selectedValue = selectBox.val();

// 设置下拉框的选中值为指定值
selectBox.val("2");

In the above code, first use the val() method to obtain the currently selected value of the drop-down box. Then use the val("2") method to set the selected value of the drop-down box to "2", that is, select the option with value "2" in the drop-down box.

2. Use the prop() method to set the selected value of the drop-down box

The prop() method is used to get or set the attribute value of the element. For drop-down boxes, you can use the prop("selectedIndex", index) method to set the selected option. Among them, index is the position of the selected option in the drop-down box, counting from 0.

The following is a sample code that uses the prop() method to set the selected value of the drop-down box:

// 获取当前选中的选项在下拉框中的位置
var selectedIndex = selectBox.prop("selectedIndex");

// 设置下拉框选中的选项为第二项
selectBox.prop("selectedIndex", 1);

In the above code, first use the prop("selectedIndex") method to obtain the currently selected value of the drop-down box. The position of the option in the drop-down box, and then use the prop("selectedIndex", 1) method to set the option selected in the drop-down box to the second item.

Summary

This article introduces two methods of using jquery to set the selected value of a drop-down box: val() and prop(). The val() method is used to set the value of the drop-down box, and the prop() method is used to set the property value of the drop-down box. Both of these methods can be used to implement the function of setting the selected value of the drop-down box. Which method to use needs to be decided according to the actual situation.

The above is the detailed content of How to set the selected value of drop-down box in jquery. For more information, please follow other related articles on the PHP Chinese website!