Ii. Three-Level linkage menu, simple implementation (2)

In the last article, I wrote a plug-in for the second-level linkage menu, but only two-level linkage is supported. Now I have slightly improved the support for second-and third-level linkages.

/*** JQuery Linkage Menu ** Copyright 2014, sunyingyuan * QQ: 1586383022 * Email: yingyuansun@163.com ** Level 2/Level 3 Linkage Menu * supports Level 2 or level 3 Association, page static json and AJAX values can be dynamically obtained from the backend. ** simple usage: * HTML code: * <select id = "selectOne"> * <option> default display name of level 1 menu </option> * </select> * <select id = "selectTwo"> * <option> the default display name of the level-2 menu </option> * </select> * if there is a level-3 menu, same as ** JS Code: * introduce jQuery and jquery. linkageMenu. after js *, jquery. linkageMenu. js must introduce ** $ (function () {* $. linkageMenu ({* 'selectoneid': 'selectone', // level-1 menu Id 'selecttwid': 'selecttwo', // level-2 menu Id 'selectthreeid ':'', // Level 3 menu Id 'selectoneval': '', // Level 1 menu option value 'selecttwoval':'', // Level 2 menu option value 'selectthreeval ':'', // The Three-Level menu option value 'selectoneparam': 'selectonevalue '. // The parameter name of the first-level menu when obtaining the value of the second-level menu from the background. The default value is selectOneValue 'selecttwoparam ': 'selecttwovalue', // when you obtain the value of a level-3 menu from the background, the parameter name of the level-2 menu. The default value is selecttwovalue ':'', // obtain the url 'getselectthreevalurl' of the second-level menu value: ''// obtain the url of the third-level menu value *}); **/(function ($) {$. linkageMenu = function (options) {// default parameter var settings = $. extend ({'selectoneid': 'selectone', // level-1 menu Id 'selecttwid': 'selecttwo', // level-2 menu Id 'selectthreeid ':'', // Level 3 menu Id 'selectoneval': '', // Level 1 menu option value 'selecttwoval':'', // Level 2 menu option value 'selectthreeval ':'', // The Three-Level menu option value 'selectoneparam': 'selectonevalue '. // The parameter name of the first-level menu when obtaining the value of the second-level menu from the background. The default value is selectOneValue 'selecttwoparam ': 'selecttwovalue', // when you obtain the value of a level-3 menu from the background, the parameter name of the level-2 menu. The default value is selecttwovalue ':'', // obtain the url 'getselectthreevalurl': ''of the second-level menu value. // obtain the url of the third-level menu value}, options); var $ s1 = $ (" # "+ settings. selectOneId); var $ s2 = $ ("#" + settings. selectTwoId); var $ s3 =$ ("#" + settings. selectThreeId); // level-1 menu initialization _ selectValParseJSON ($. parseJSON (settings. selectOneVal), $ s1); // when a level-1 menu changes, the option value of the level-2 menu changes $ s1.change (function () {_ changeMenu ($ s1, $ s2, settings. selectTwoVal, settings. selectOneParam, settings. getSelectTwoValUrl); $ s2.change () ;}); // if there is a third-level menu, when the second-level menu changes, the third-level menu changes option if (settings. selectThreeId) {$ s2.change (function () {_ changeMenu ($ s2, $ s3, settings. selectThreeVal, settings. selectTwoParam, settings. getSelectThreeValUrl);}/*** Private Methods: _ changeMenu **: the impact on the value of the select component when the value of the select component changes, that is, the value of the next-level select Component Changes * @ param preSelectIdObj: the object of the component whose value changes * @ param folSelectIdObj: the object of the next-level component affected by the changed component * @ param folSelectMenuVal: the static value of the next level of component (not used when AJAX acquires data from the background) * @ param getFolSelectMenuValParam: The parameter requested from the background * @ param getFolSelectMenuValUrl when AJAX acquires data: URL for AJAX data retrieval * @ private */function _ changeMenu (preSelectIdObj, folSelectIdObj, folSelectMenuVal, getFolSelectMenuValParam, getFolSelectMenuValUrl) {// preSelectIdObj. change (function () {folSelectIdObj.html (""); var preSelectedVal = preSelectIdObj. val (); if (folSelectMenuVal) {_ selectValParseJSON ($. parseJSON (folSelectMenuVal), folSelectIdObj); return;} // ajax asynchronously retrieves the data of the next menu $. ajax ({type: "GET", url: getFolSelectMenuValUrl, data: getFolSelectMenuValParam + "=" + preSelectedVal, success: function (val) {_ selectValParseJSON ($. parseJSON (val), folSelectIdObj) ;}}); //});}/*** Private Methods: _ selectValParseJSON ** fill json with the select component of the specified id * @ param jsonVal: json object, which is the json object to be filled with the select component * @ param selectId: id of the select component to be filled * @ private */function _ selectValParseJSON (jsonVal, selectId) {$. each (jsonVal, function (key, val) {_ appendOptionTo (selectId, key, val) ;};/*** Private Methods: _ appendOptionTo ** Add The value to The option component * @ param $ obj: The selected object jquery, which is generally The select object to be added with option * @ param key: option key, generally, it is set Id * @ param val; option val, which is also used as the displayed value, here, the displayed value and option value are the same by default * @ param defaultSelectVal; set the default value, which is usually initialized, default value * @ private */function _ appendOptionTo ($ obj, key, val, defaultSelectVal) {var $ opt = $ ("<option> "). text (key ). val (val); if (val = defaultSelectVal) {$ opt. attr ("selected", "selected");} $ opt. appendTo ($ obj) ;};} (jQuery );

The following is the test HTML

<! DOCTYPE html> 

Git addresses for https://github.com/sunyingyuan/jquery.linkageMenu