基於jQuery實現仿淘寶套餐選擇外掛_jquery

首先是頁面HTML程式碼

複製程式碼 程式碼如下:

本地呼叫

ajax呼叫

然後呼叫的js

複製程式碼 程式碼如下:

<script><br /> /************************************<br />  * 基於本地json資料的選項列建立<br />  ****************************************/<br /> var datanodes=[<br />     {text:"官方標配",value:"1",selected:true},<br />     {text:"套餐一",value:"2"},<br />     {text:"套餐二",value:"3"},<br />     {text:"套餐三",value:"4"},<br />     {text:"套餐四",value:"5"},<br />     {text:"套餐五",value:"6"},<br />     {text:"套餐六",value:"7"},<br />     {text:"套餐七",value:"8"},<br />     {text:"套餐八",value:"9"},<br />     {text:"套餐九",value:"10"}<br /> ];<br /> /**<br />  * @type {mylist}<br />  * @param className 容器支撐層的css名稱<br />  * @param 使用者點擊後呼叫的回呼函數 由開發者自訂<br />  */<br /> var mylistobjLocal=new OptionList("testlocal","mycall");<br /> mylistobjLocal.createListHtml(datanodes);<br /> /************************************<br />  * 基於遠端伺服器的json資料的選項列建立**********************************<br />  * 基於遠端伺服器的json資料的選項列建立<br />  * @type {mylist}<br />  * @param className 容器支撐層的css名稱<br />  * @param 使用者點擊後呼叫的回呼函數 由開發者自訂<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 />  * 基於url建立一個選項清單<br />  */<br /> mylistobjAjax.createListHtmlForAjax(url);<br /> /***<br />  * 使用者選取某選項的回呼函數<br />  * @param result 傳回目前選取的項目的相關參數<br />  */<br /> var mycall=function(result){<br />     alert("您選取了： " result.text ":" result.value);<br /> }</script>

以上就是本文的全部內容了，希望大家能夠喜歡