JQuery implements the Select drop-down list to Select the status, jqueryselect

JQuery implements the Select drop-down list to Select the status, jqueryselect

Scenario:

E. g.: When managing a blog post, the management of a blog post includes a column named "status", which has many statuses, such:Normal, waiting 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:

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

Error example:

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

If you run the click event, an Ajax request is triggered for the first time in the drop-down list. This does not conform to the logic. Therefore, you cannot use the click event as the method to select a specific value in the drop-down list.

Correct example:

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

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:

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

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!