How to assign value to select in jquery

jQuery is a very popular JavaScript library that provides developers with a simple and convenient way to manipulate HTML documents and achieve interactive effects. When developing web applications, manipulating form elements is one of the most common requirements. This article will focus on how to assign values ​​to select in jQuery.

Generally speaking, the method of assigning values ​​​​to select in HTML is very simple. You only need to set the value attribute for its option list. However, in front-end development, we often need to operate form elements through JavaScript. At this time, jQuery has become our first choice. The following is an example of a simple HTML select element:

<select id="food">
  <option value="1">Pizza</option>
  <option value="2">Sushi</option>
  <option value="3">Burgers</option>
</select>

If we want to set the value of the "Food" select box to "Sushi" through jQuery, we can use the following code:

$('#food').val('2');

Here, we use jQuery’s val() function, which allows us to get or set the value of a form element. It's very simple to use, just pass the required value to it as a parameter. In this example, we get a reference to the select element by selecting the ID selector (#food), and then pass the value we want ("2") to the val() function.

It should be noted that the value we need to set must match the value attribute of an option in the option list, otherwise the operation will be invalid.

If we want to set the value of the selection box to the text content of an option instead of the value attribute, we can use jQuery's filter() function and pass it the text of the desired option. For example:

$('#food option').filter(function () {
  return $(this).html() === 'Sushi';
}).prop('selected', true);

Here, we use $('#food option') to select all option elements and use the filter() function to find the option we want. In the filter() function, we use a simple function expression to determine whether the text content of the option matches what we want. If the match is successful, we call the prop() function and set the selected property to true to select the option.

In general, assigning values ​​to select through jQuery is very simple. You only need to use the val() function to set the value attribute or use the filter() function to select the option to be set. Using these tips, you can easily manipulate form elements in your web application.

The above is the detailed content of How to assign value to select in jquery. For more information, please follow other related articles on the PHP Chinese website!