Easyui combobox three-level Cascade input implementation,
/** * @ param loads the province and city by default */$ (function () {$ ("input [id ^ = 'area _ ']" ).css ({"height": "39px", "width": "250px "}); var city = "", district = ""; $ ('# area_province '). combobox ({valueField: 'id', textField: 'name', editable: false, url: postPath + "/bisProvince/getBisProvinces", method: "get", formatter: function (row) {return " <span class = 'item-text'> "+ row. name + "</span>" ;}, onLoadSuccess: function () {/* if ($ ("# provinceId "). val ()! = Null) {$ (this ). combobox ("select", $ ("# provinceId "). val ();} */}, onChange: function (provinceId, oldValue) {$. get (postPath + "/bisCity/getBisCitys/" + provinceId, function (data) {city. combobox ("clear "). combobox ('loaddata', data); district. combobox ("clear") ;}, 'json') ;}}); city =$ ('# area_city '). combobox ({valueField: 'id', textField: 'name', editable: false, panelHeight: "auto", formatter: function (row) {return " <span class = 'item-text'> "+ row. name + "</span>" ;}, onLoadSuccess: function () {/* if ($ ("# cityId "). val ()! = Null) {$ (this ). combobox ("select", $ ("# cityId "). val ();} */}, onChange: function (cityId, oldValue) {$. get (postPath + "/bisDistrict/getBisDistricts/" + cityId, function (data) {district. combobox ("clear "). combobox ('loaddata', data) ;}, 'json') ;}}); district =$ ('# area_district '). combobox ({valueField: 'id', textField: 'name', editable: false, panelHeight: "auto", formatter: function (row) {return " <span class = 'item-text'>" + row. name + "</span>" ;}, onLoadSuccess: function () {/* if ($ ("# districtId "). val ()! = Null) {$ (this ). combobox ("select", $ ("# districtId "). val ();} */},});/* $ (function () {$. get (postPath + "/bisProvince/getBisProvinces", function (datas) {var option = "<option value =''> -- select -- </option> "; $. each (datas, function (I) {if ($ ("# provinceId "). val () = datas [I]. id) {option + = "<option value = '" + datas [I]. id + "'selected>" + datas [I]. name + "</option>" ;}else {option + = "<option value = '" + datas [I]. id + "'>" + dat As [I]. name + "</option>" ;}}); $ ("# province" example .html (option) ;}); if ($ ("# cityId "). val ()! = Null & $ ("# cityId"). val ()! = "") {LoadCity ($ ("# provinceId "). val () ;}}); * // ***** @ param loading city * @ param provinceId province and city ID * // * function loadCity (provinceId) {$ ("# provinceId "). val (provinceId); $. get (postPath + "/bisCity/getBisCitys/" + provinceId, function (datas) {var option = "<option value =''> -- select -- </option> "; $. each (datas, function (I) {if ($ ("# cityId "). val () = datas [I]. id) {option + = "<option value = '" + datas [I]. id + "'selected>" + datas [I]. Name + "</option>" ;}else {option + = "<option value = '" + datas [I]. id + "'>" + datas [I]. name + "</option>" ;}}); $ ("# city" pai.html (option) ;}); if ($ ("# districtId "). val ()! = Null & $ ("# districtId"). val ()! = "") {LoadDistrict ($ ("# cityId "). val ();} * // *** @ param loading Region * @ param cityId city ID * // * function loadDistrict (cityId) {$ ("# cityId "). val (cityId); $. get (postPath + "/bisDistrict/getBisDistricts/" + cityId, function (datas) {if (datas! = Null & datas! = "") {Var option = "<option value =''> -- select -- </option> "; $. each (datas, function (I) {if ($ ("# districtId "). val () = datas [I]. id) {option + = "<option value = '" + datas [I]. id + "'selected>" + datas [I]. name + "</option>" ;}else {option + = "<option value = '" + datas [I]. id + "'>" + datas [I]. name + "</option>" ;}}); $ ("# district" example .html (option) ;}}) ;}$ ("# district "). change (function () {$ ("# districtId "). val ($ ("# district "). val () ;}); $ ("# city "). change (function () {// $ ("# cityId "). val ($ ("# city "). val (); loadDistrict ($ ("# city "). val () ;}); $ ("# province "). change (function () {$ ("# cityId "). val (""); $ ("# district "). empty (); loadCity ($ ("# province "). val ());});*/