Two-level linkage menu, simple implementation

/*** JQuery Linkage Menu ** Copyright 2014, sunyingyuan * QQ: 1586383022 * Email: yingyuansun@163.com ** secondary Linkage Menu * currently only supports secondary Linkage, in addition, you can only use AJAX to retrieve data from the background in real time. If you need static data at the foreground, contact the author. If you do not need the data, add * 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> ** JS Code: * introduce jQuery and jquery. linkageMenu. js post * $ (function () {* $. linkageMenu ({* 'selectoneid': 'selectone', // level-1 menu Id * 'selecttwid': 'selecttwo', // level-2 menu Id * 'selectoneval ': '{"key1": "value1", "key2": "value2"}', // level-1 menu option value * 'paramname': 'selectonevalue ', // request url parameter key * 'getselecttwovalurl': 'http: // localhost: 3000/users '// obtain the url of the second-level menu value through the value of the first-level menu *}); */(function ($) {$. linkageMenu = function (options) {// default parameter var settings = $. extend ({'selectoneid': 'selectone', // level-1 menu Id 'selecttwid': 'selecttwo', // level-2 menu Id 'selectoneval ':'', // The option value of the first-level menu is 'selecttwoval': '{"key1": "value2", "key2": "value2"}', // reserved field, extension 'paramname': 'selectonevalue 'For the plug-in, // request url parameter key'getselecttwovalurl': ''// obtain the url of the second-level menu value}, options ); var $ s1 = $ ("#" + settings. selectOneId); var $ s2 = $ ("#" + settings. selectTwoId); var selectOneValJSON = $. parseJSON (settings. selectOneVal); // alert (selectOneValJSON. key1); // JSON. parse (options. selectOneVal); // converts a JSON string to a JSON object // initializes a level-1 menu $. each (selectOneValJSON, function (key, val) {appendOptionTo ($ s1, key, val) ;}); // when the first-level menu is changed, level 2 menu changes $ s1.change (function () {$s2.html (""); var s1SelectedVal = $ s1.val (); // ajax asynchronously retrieves Level 2 menu data $. ajax ({type: "GET", url: settings. getSelectTwoValUrl, data: settings. paramName + "=" + s1SelectedVal, success: function (select2Val) {var selectTwoValJSON = $. parseJSON (select2Val); $. each (selectTwoValJSON, function (key, val) {appendOptionTo ($ s2, key, val) ;}}) ;}) (jQuery ); /*** Tools Methods: appendOptionTo * @ 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 */function appendOptionTo ($ obj, key, val, defaselecselectval) {var $ opt = $ ("<option> "). text (key ). val (val); if (val = defaultSelectVal) {$ opt. attr ("selected", "selected");} $ opt. appendTo ($ obj );}