JQuery event -- Select and Select jqueryselect

JQuery event -- Select and Select jqueryselect

Scenario:

For example, when managing a blog post, the management of a blog post includes the following columns:StatusThis column has many statuses, such as: Normal, pending for review, deletion, etc... in this case, if you use the Select drop-down list to Select the status and Select a specific item value, and submit it asynchronously through Ajax, you can enjoy a larger experience in terms of effect and experience.

An example of the drop-down list is as follows:

 

1 <select id = "status"> 2 <option value = "0"> to be reviewed </option> 3 <option value = "1"> not approved </option> 4 <option value = "2"> production in progress </option> 5 <option value = "3"> production completed </option> 6 <option value = "4"> release </option> 7 <option value = "5"> suspend </option> 8 <option value = "6"> Delete </option> 9 </select>

 

Error example:

 

1 $("select#status").click(function(){2     console.log($(this).val());3 });

 

IfClick EventExecute, the Ajax request is triggered for the first time when you click the drop-down list. This does not conform to the logic. Therefore, you cannot use the click event to select a specific value from the drop-down list.

 

Correct example:

 

1 $("select#status").change(function(){2     console.log($(this).val());3 });

 

W3SCHOOL's interpretation of the change event is as follows:

 

Definition and usage

 

When the value of an element changes, a change event occurs.

 

This event applies only to text fields and textarea and select elements.

 

The change () function triggers the change event, or specifies the function that runs when a change event occurs.

 

Note: When used for select elements, the change event occurs when an option is selected. When used in text field or text area, this event occurs when the element loses focus.

 

 

The above shows that the Change event should be used for the Select drop-down list.

Supplement:

Because Ajax technology is also used for asynchronous page turning, the original method will fail after page turning, and the following code should be used for execution:

1 $(document).on("change",'select#status',function(){2     console.log($(this).val());3 });