Implementierung eines Taobao-ähnlichen Paketauswahl-Plug-Ins basierend auf jQuery_jquery

Der erste ist der HTML-Code der Seite

Code kopieren Der Code lautet wie folgt:

Lokaler Anruf

Dann rufen Sie die js auf

Code kopieren Der Code lautet wie folgt:

<script><br /> /**************************************<br /> * Erstellen Sie Optionsspalten basierend auf lokalen JSON-Daten<br /> ******************************************/<br /> var datanodes=[<br /> {text:"Offizieller Standard",Wert:"1",selected:true},<br /> {text:"Paket Eins",Wert:"2"},<br /> {text:"Paket Zwei",Wert:"3"},<br /> {text:"Paket Drei",Wert:"4"},<br /> {text:"Paket Vier",Wert:"5"},<br /> {text:"Paket Fünf",Wert:"6"},<br /> {text:"Paket Sechs",Wert:"7"},<br /> {text:"Paket Sieben",Wert:"8"},<br /> {text:"Paket acht",Wert:"9"},<br /> {text:"Paket Neun",Wert:"10"}<br /> ];<br /> /**<br /> * @type {mylist}<br /> * @param className CSS-Name der Container-Unterstützungsschicht <br /> * @param Die Rückruffunktion, die aufgerufen wird, nachdem der Benutzer geklickt hat, angepasst vom Entwickler<br /> ​*/<br /> var mylistobjLocal=new OptionList("testlocal","mycall");<br /> mylistobjLocal.createListHtml(datanodes);<br /> /**************************************<br /> * Erstellen Sie Optionsspalten basierend auf JSON-Daten vom Remote-Server ************************************<br /> * Erstellen Sie Optionsspalten basierend auf JSON-Daten vom Remote-Server<br /> * @type {mylist}<br /> * @param className CSS-Name der Container-Unterstützungsschicht <br /> * @param Die Rückruffunktion, die aufgerufen wird, nachdem der Benutzer geklickt hat, angepasst vom Entwickler<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 /> * Erstellen Sie eine Liste mit Optionen basierend auf der URL<br /> ​*/<br /> mylistobjAjax.createListHtmlForAjax(url);<br /> /***<br /> *Rückruffunktion, wenn der Benutzer eine Option auswählt<br /> * @param result Gibt die relevanten Parameter des aktuell ausgewählten Elements <br /> zurück ​*/<br /> var mycall=function(result){<br /> Alert("Sie haben ausgewählt: " result.text :: result.value);<br /> }</script>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen