First, let's take a look at the effect.
Copy codeThe Code is as follows:
<Head>
<Title> </title>
<Link type = "text/css" rel = "Stylesheet" href = "JQSelect.css"/>
<Script type = "text/javascript" src = "jquery-1.2.6.js"> </script>
<Script type = "text/javascript" src = "JQSelect. js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Test"). jsScroll ();
})
</Script>
</Head>
<Body>
<Select id = "test">
<Option value = "1"> 1 </option>
<Option value = "2"> 2 </option>
<Option value = "3"> 3 </option>
<Option value = "4"> 4 </option>
<Option value = "5"> 5 </option>
<Option value = "6"> 6 </option>
<Option value = "7"> 7 </option>
<Option value = "8"> 8 </option>
<Option value = "9"> 9 </option>
<Option value = "10"> 10 </option>
</Select>
The simple method is to convert the select statement into a custom style.
Currently, only two parameters can be set.
Copy codeThe Code is as follows:
$ (Function (){
$ ("# Test"). jsScroll ({showLength: 3, option_click: function () {alert ("1 ");}});
})
ShowLength: the default number of display items in the drop-down list. Five are displayed by default.
Option_click: Click the event executed by each option. By default, the options value is bound to the input.
Online Demo: http://demo.jb51.net/js/2011/JQSelect/
Package download: http://www.jb51.net/jiaoben/40362.html