Home  >  Article  >  Web Front-end  >  How to set the selected value of drop-down box in jquery

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

PHPz
PHPzOriginal
2023-04-26 14:22:453303browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn