Use jquery's Ajax method to get drop-down list values

AJAX is a technique for creating fast, Dynamic Web pages.

AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of the page without reloading the entire page, and the user experience is very good.

Two methods for dynamically loading DropDownList values are described below.

The first type:

View Layer

<select id= "Funcnum" name= "Funcnum" ></select><script>$ (document). Ready (function () {showfuncid () ;} function Showfuncid () {$ (' #funcNum '). empty (); var civalue = $ (' #funcNum ');  Civalue.append (' <option value= ' ">pls select</option> ');   $.ajax ({         url:u,  //your actual URL        type: ' Post ',          dataType: ' json ',          success:function (opts) {                 if (opts && opts.length > 0) {                     var html = [];                      for (var i = 0; i < opts.length; i++) {                          html.push (' <option value= ' ' +opts[i].id+ ' "> ' +opts[i].desc+ ' </ Option> ');                       }                      Civalue.append (Html.join ("));}                  }   );  } </script>

Controller layer

             Response.setcontenttype ("Application/json");           Response.setcharacterencoding ("Utf-8");           PrintWriter writer = Response.getwriter ();           Net.sf.json.JSONArray array = jsonarray.fromobject (new ArrayList ());//the list that contains actual data,use a new Arrayli St instead here             writer.append (array.tostring ());           return null;

　　

　　

The second type:

View Layer

<select id= "Funcnum" name= "Funcnum" ></select><script>$ (function () {   $.ajax ({       type: ' POST ',       url:url;//your actual URL      dataType: ' json ',       Cache:false,      async:false,      success:function ( Data) {           $ (' #funcNum '). Get (0). options.length = 0;           $ (' #funcNum '). Append (' <option value= "" >pls select</option> ');            $.each (data, function (i, obj) {                var option = $ (' <option/> ');                Option.val (obj.id);                Option.text (OBJ.DESC);                $ (' #funcNum '). Append (option);              })        ,                 error:function () {             alert ("Error while getting vehicle type Results ");});    </script>

　　

　

Controller layer

             Response.setcontenttype ("Application/json");           Response.setcharacterencoding ("Utf-8");           PrintWriter writer = Response.getwriter ();           Net.sf.json.JSONArray array = jsonarray.fromobject (new ArrayList ());//the list that contains actual data,use a new Arrayli St instead here             writer.append (array.tostring ());           return null;

　　

　

　　

Use jquery's Ajax method to get drop-down list values