How to modify the select value in jquery

In web development, the drop-down selection box (select) is one of the common user interaction controls. We may need to dynamically modify its options and selected values. In this case, jQuery provides a very convenient implementation.

1. Modify options
We can use jQuery's addClass(), removeClass() and text() methods to add, delete and modify an option. For example, consider the following HTML code:

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

We can use the following code to add an option:

$('#mySelect').append($('<option>', {
  value: '4',
  text: '选项4'
}));

This will add a value to the select box with the value "4" and the text "Option 4" ” new option.

We can also use the following code to delete an option:

$('#mySelect option[value="3"]').remove();

This will delete the option with a value of "3".

2. Modify the selected value
To change the selected value of the drop-down box, we can use the .val() method. For example:

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

This will select the option with value "2".

It should be noted that if we add a new option and want to select it, we need to use the .val() method to select it immediately after adding it. For example:

$('#mySelect').append($('<option>', {
  value: '4',
  text: '选项4'
})).val('4');

This will add a new option and select it.

In short, jQuery provides convenient methods to modify the options and selected values ​​of the selection box. These methods can help us better control user interactions and improve the efficiency and ease of use of our web applications.

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