div Simulation dropdown menu select control module CSS Implementation form select landscaping

The div CSS simulation realizes the form form Drop-down Select control beautification and the function realization. Can implement simulation of the Select form Drop-down submit data transfer function

How to use and how to call: $.divselect ("#divselect", "#inputselect"); "#divselect" This is which analog list of the box ID, "#inputselect" This is the choice to id= "Inputselect" of the input hidden field assigned value OH. Understand a little program to understand why to assign value. It means that assigning a value to this hidden field is equivalent to using an ugly select Drop-down list to get a value. The function of the Drop-down list is simply to pass a value to the past.

This form select Drop-down control is implemented using DIV+JQ+CSS, whose form functions are normally used and can be transmitted correctly. Change the CSS background, CSS width, css height, and other pictures or CSS styles as needed to achieve your desired select Drop-down menu form beautification effect.

The jquery plug-in code is as follows:

 
  
  

  
   
   
Jquery.divselect = function (Divselectid,inputselectid) {
  
   
   
var inputselect = $ (Inputselectid);
  
   
   
$ (divselectid+ "cite"). Click (function () {
  
   
   
var ul = $ (divselectid+ "ul");
  
   
   
if (Ul.css ("display") = = "None") {
  
   
   
Ul.slidedown ("fast");
  
   
   
}else{
  
   
   
Ul.slideup ("fast");
  
   
   
}
  
   
   
});
  
   
   
$ (divselectid+ "ul li a"). Click (function () {
  
   
   
var txt = $ (this). text ();
  
   
   
$ (divselectid+ "cite"). HTML (TXT);
  
   
   
var value = $ (this). attr ("Selectid");
  
   
   
Inputselect.val (value);
  
   
   
$ (divselectid+ "ul"). Hide ();
  
   
   

  
   
   
});
  
   
   
};
 
  
  

The DIV Simulation drop-down menu (SELECT) jquery plug-in invocation method is as follows:

 
  
  

  
   
   
<script type= "Text/javascript" >
  
   
   
$ (function () {
  
   
   
$.divselect ("#divselect", "#inputselect");
  
   
   
});
  
   
   
</script>
 
  
  

The corresponding HTML source code fragment is as follows:

 
  
  
 
   
   
 <form action= " method=" POST ">  
 
   
   
 <div id=" Divselect ">   
 
   
   
 <cite> Select effects category </cite>  
 
   
   
 <ul>  
 
   
   
 <li><a  href= "javascript:;"  selectid= "1" > Navigation menu </a></li>  
 
   
   
 <li><a href= "javascript:;"  selectid= "2" > Drop-down Select Effect </a></li>  
 
   
   
 <li><a href= "javascript:;"  selectid= "3" >select analog </a></li>  
 
   
   
 <li><a href= "javascript:;"  selectid= "4" >divcss5 special effects </a></li>  
 
   
   
 <li><a href= "javascript:;"  selectid= "5" >jquery  pull-down menu effects </a></li>  
 
   
   
 </ul>  
 
   
   
 </div >  
 
   
   
 <input name= " type=" hidden " value=" " id=" Inputselect "/> " 
 
   
   
   
 
   
   
 </form>