Implementing Taobao-like package selection plug-in based on jQuery_jquery

The first is the page HTML code

Copy code The code is as follows:

Local call

ajax call

Then call the js

Copy code The code is as follows:

<script><br /> /**************************************<br /> * Create option columns based on local json data<br /> ****************************************/<br /> var datanodes=[<br /> {text:"Official standard",value:"1",selected:true},<br /> {text:"Package One",value:"2"},<br /> {text:"Package Two",value:"3"},<br /> {text:"Package Three",value:"4"},<br /> {text:"Package Four",value:"5"},<br /> {text:"Package Five",value:"6"},<br /> {text:"Package Six",value:"7"},<br /> {text:"Package Seven",value:"8"},<br /> {text:"Package eight",value:"9"},<br /> {text:"Package Nine",value:"10"}<br /> ];<br /> /**<br /> * @type {mylist}<br /> * @param className css name of the container support layer <br /> * @param The callback function called after the user clicks, customized by the developer<br /> ​*/<br /> var mylistobjLocal=new OptionList("testlocal","mycall");<br /> mylistobjLocal.createListHtml(datanodes);<br /> /**********************************<br /> * Create option columns based on json data from the remote server ************************************<br /> * Create option columns based on json data from the remote server<br /> * @type {mylist}<br /> * @param className css name of the container support layer <br /> * @param The callback function called after the user clicks, customized by the developer<br /> ​*/<br /> var mylistobjAjax=new OptionList("testajax","mycall");<a href="http://127.0.0.1/option-jquery-dc/testJson.php"> var url="http://127.0.0.1/option-jquery-dc/testJson.php<br />";<br /> /**<br /> * Create a list of options based on url<br /> ​*/<br /> mylistobjAjax.createListHtmlForAjax(url);<br /> /***<br /> *Callback function when the user selects an option<br /> * @param result Returns the relevant parameters of the currently selected item <br /> ​*/<br /> var mycall=function(result){<br /> alert("You selected: " result.text ":" result.value);<br /> }</script>

The above is the entire content of this article, I hope you all like it