Select Landscaping, based on jquery

The reason is that in practice, the height of input can not be changed, in other words how to adjust, his four weeks will have a gap, of course, only in IE, if adjusted, FF effect is not ideal, there is no good solution, unless with the image simulation, in order to pursue perfection, simulation on the simulation bar.

I used to use jquery, so I found Nicejform, a jquery plugin designed to beautify the form. (I know there are related articles on the jar, I have also consulted, but beautification is not my strong point, so I want to find ready-made)

Effect view

Look at the source, you can find no additional style, ID and so on, so if you do not use this plugin, the page does not need to change

As we all know, the form of the select is the most difficult to simulate, the same nicejforms also do not have a good simulation, then do their own reform it.

3.5 Hours past ...

Finally I conquered, thoroughly simulated beautify the Select form, you can say that the function is not bad, modified the original version of some deficiencies

• Click on the blank page, pop-up options can not retract
  
• Cannot set option value values, all are "#"
  
• Because it is set to "#", if the select is placed below the page, the selection will return to the top of the page
  

Now all these problems are solved and can be used formally, oh,yeah!

Effect view

Click to download the modified file
Added 10.1 days

In fact, the top of the select beautification has a very big problem, but it seems that no one noticed that when the page is loaded, at the bottom of the page will appear these options, this time again fencing, is no longer a patchwork of the original plug-ins, they wrote the code.

Characteristics:

• IE valid only, under FF remain intact
  
• Do not accept keyboard response, so the keys are invalid and the Rollers are invalid
  
• The rest of them should have been imitated.
  

Because the foreground programming is only my hobby, so more meticulous imitation, can rely on everyone.

In fact, I also think that writing such a pile may not be useful, but since all written out, or put it up, useful useless let everyone to evaluate.

Browse Address: http://www.live-my-life-with-yuyi.com/lab/jquery/form_select/

Code:

The following is a reference fragment: if ($.browser.msie) $ (document). Ready (function () { To beautify each select $ ("select"). each (function () { Select_name = $ (this). attr ("name"); Get the height of the Select width = $ (this). width (); Get the width of input Input_width = WIDTH-17; Get absolute coordinates Offset = $ (this). offset (); Beautify the Code select_html = ' "; Attach to Page $ ("Body"). Append (select_html); $ (this). CSS ({visibility: "hidden"}); $ (this). CSS ("margin", "200px"); Gets the number of option Option_num = $ ("option", $ (this)). length; Option's Height Option_height = Option_num * > 200? 200:option_num*21; Option's width Option_width = width; Option's coordinates Option_left = Offset.left; Option_top = offset.top+21; The beautification code of the Pull-down menu option_html = " "; $ (this). Find (' option '). each (function () { option_html + = " " +$ (This). Text () + " "; }); option_html = " "; Attach to Page $ ("Body"). Append (option_html); Hide Options $ ("#option_" +select_name). Hide (); Set IMG ID and input ID img_id = "#img_" +select_name; input_id = "#input_" +select_name; Set Picture Click events $ (img_id). Click (function () { Get target ID by name dest_id = "#option_" +$ (This). attr ("name"); Whether the status of the Get option is turned on or off State = $ (dest_id). CSS ("display"); Turn off all the options $ (". Select_option_div"). Hide (); Open, shut, open. if (state = = "None") { $ (dest_id). Show (); } else{ $ (dest_id). Hide (); } }); Input's Click event $ (input_id). Click (function () { Get Target ID dest_id = $ (this). attr ("id"). substr (6); dest_id = "#option_" +DEST_ID; State = $ (dest_id). CSS ("display"); $ (". Select_option_div"). Hide (); if (state = = "None") { $ (dest_id). Show (); Alert ("Hello"); } else{ $ (dest_id). Hide (); } }); To set the default selected item obj = document.getElementById (select_name); input_id = "#input_" +select_name; $ (input_id). Val (Obj.options[obj.selectedindex].text); }); Action after clicking on the option $ (". Select_option"). Click (function () { Get SELECT ID parent_id = $ (this). Parent (). attr ("id"); parent_id = PARENT_ID.SUBSTR (7); input_id = "#input_" +PARENT_ID; Display selected items at input $ (input_id). Val ($ (this). text ()); Manipulating Select options obj = document.getElementById (parent_id); obj.options[obj.selectedindex].text=$ (This). text (); option_id = "#option_" +PARENT_ID; Hide Options When selected $ (option_id). Hide (); }); Apply mouse to move out effect on option options $ (". Select_option"). Hover (function () {$ (this). addclass (' Select_highlight ')},function () {$ (this). Removeclass (" Select_highlight ")}); }); Click Page function $ (document). Click (function (evt) { var evt = evt | | window.event; Event Object var target = Evt.target | | Window.event.srcElement; Event target var t_classname = Target.classname; Event Target ID if (T_classname = = "Select_img" | | | t_classname = "Select_input" | | t_classname = = "Select_option") { return false; } else{ $ (". Select_option_div"). Hide (); }; });