How to update the content of the drop-down list when triggered by jquery

This article describes how to update the content of the drop-down list when jquery is triggered. It involves some techniques related to jQuery's use of ajax interaction to implement dynamic update. It has some reference value, for more information about how to update the drop-down list when jquery is triggered, see the following example. We will share this with you for your reference. The details are as follows:

If the server has a request address to return the required data

Url:/hello

The returned result is similar:

The Code is as follows:

[{"Watermelon": 10 },{ "apple": 12 },{ "banana": 13 },{ "Mango": 14}]

Such json data

Html:

Button:

Drop-down list:

Js Code:

$ (Function () {$ ("# btn "). click ($. ajax ({type: "POST", url: "http: // localhost/XXXX/Test", cache: false, // dataType: "json ", // return data format success: function (ret) {$ ("# sel "). empty (); $. each (ret, function (ind) {for (var key in ret [ind]) {var opt = $ (""); Opt. val (ret [ind] [key]); opt. text (key); $ ("# sel "). append (opt );}});}}););});

I hope this article will help you with jQuery programming.