JQuery Select control Action Usage Summary

jquery Gets and sets the Select Options method Rollup as follows:

Get Select

First look at the following code:

$ ("#select_id"). Change (function () {//code ...}); Adds an event for a select that fires when one of the items is selected
var checktext=$ ("#select_id"). Find ("option:selected"). Text (); Gets the text selected by select
var checkvalue=$ ("#select_id"). Val (); Gets the value of the Select selection
var checkindex=$ ("#select_id"). Get (0). SelectedIndex; Get the index value selected by select
var maxindex=$ ("#select_id option:last"). attr ("index"); Get the maximum index value for select
$ ("#select_id"). Get (0). selectedindex=1; To set the Select index value of 1
$ ("#select_id"). Val (4); Select to set the value of 4 for the Select
$ ("#select_id option[text= ' jQuery ']"). attr ("selected", true); Set the Select's text value to

jquery items are selected

Gets the text selected by select:

$ ("#ddlRegType"). Find ("option:selected"). Text ();

Gets the value selected by select:

$ ("#www111cnnet"). Val ();

Gets the index selected by select:

$ ("#www111cnnet"). Get (0). SelectedIndex;

Set Select

jquery Add/Remove option items for select:

$ ("#select_id"). Append ("<option value= ' value ' >Text</option>"); Append an option to select (dropdown)
$ ("#select_id"). Prepend ("<option value= ' 0 ' > Please select </option>"); Inserts an option for the Select (first position)
$ ("#select_id option:last"). Remove (); Delete index value maximum option (last) in select
$ ("#select_id option[index= ' 0 ']"). Remove (); Delete option with index value of 0 in select (first)
$ ("#select_id option[value= ' 3 ']"). Remove (); Delete option value= ' 3 ' in select
$ ("#select_id option[text= ' 4 ']"). Remove (); Delete option text= ' 4 ' in select

Set the index selected by select:

Index is an indexed value

$ ("#www111cnnet"). Get (0). Selectedindex=index;
Set the value selected by select:

$ ("#www111cnnet"). attr ("value", "Normal");

$ ("#www111cnnet"). Val ("Normal");

$ ("#www111cnnet"). Get (0). value = value;

Set selected text for select:

var count=$ ("#www111cnnetoption"). Length;

for (Var i=0;i<count;i++)
{if ($ ("#www111cnnet"). Get (0). Options[i].text = text)
{
$ ("#www111cnnet"). Get (0). options[i].selected = true;

Break
}
}

Empty select:

$ ("#www111cnnet"). empty ();

Above we introduce the value of jquery+select/"target=" _blank ">jquery Select control, empty, assign, delete and add methods, let me talk about how to beautify the Select control

In this will I share the beautification method of <select>.
Advantages: Still retain the use of <select>, only change the appearance, do not change the form behavior does not interfere, late loading JS. (Note: This script relies on jquery)

Don't say anything, it's all in the code.

$ (document). Ready (function () {

To find the <select> tag that needs to be beautified, we use a class name "beautify" to determine that <select> without this style will be ignored
var selects = $ ("select.beautify");
if (Selects.length > 0) {

Add a <div> to the bottom of the code, to host and display the dropdown box options
$ ("Body"). Append ("<div id= ' dummydata ' style= ' position:absolute; Display:none ' ></div> ');

A landscaping.
Selects.each (function () {

Set an alias for this (that is, <select>) under this function, which will be used in the following anonymous function
var select = this;

Create a <input>,. Dummy will be used for our special style definition of <input> of this type
At the same time, copy some of the properties and styles of <select> to this dummy input
Once created, insert this <input> into the DOM, keeping up with the original <select>
var input = $ ("<input type= ' text ' readonly= ' readonly ' class= ' input dummy '/> ')"
. attr ("Disabled", this.disabled)
. CSS ("width", parseint (this.style.width) + "px")
. CSS ("display", This.style.display)
. InsertAfter (This)
. val (This.options[this.selectedindex].text);

Hide <select> don't define display:none in. Beautify because JS fails, we have to use it.
This.style.display = "None";

When <input class= ' dummy ' > was clicked
Input.click (function () {
Pull up the <div id= ' Dummydata ' that was created earlier and empty the contents
Pass the <select> style sheet to it, and when you need to decorate the <div>, rely on these style definitions
var div = $ ("#dummydata")
. Empty ()
. attr ("Class", select.classname);

Set the width of <div>
Here we judge a special class name "Extend"
If you have. Extend, the width will be subject to additional customization control; otherwise, width will default to <input>
$ (select). Hasclass ("Extend")
? Div.css ("width", "")
: Div.css ("width", $ (this). Innerwidth ());

<option> Copy to <div id= ' Dummydata ' >, a <option> corresponds to a <a> mark
for (var i = 0; i < select.options.length; i++) {
var item = select.options;
var a = $ ("<a href= ' Javascript:void" (0); ' class= ' nowrap ' ></a> ')
. CSS ("color", Item.style.color)
. addclass (Item.classname)
. HTML (Item.text)
. Appendto (Div);
if (i = = Select.selectedindex) {
A.addclass ("selected");
}
When the selected item is clicked, the,<input> content is displayed as the corresponding <option> close the <div> layer while bubbling the event to the original <select>
A.click (function () {
var n = $ (this). index ();
Select.selectedindex = n;
Input.val (Select.options[n].text);
Div.hide ();
$ (select). Change ();
});
}

Here we judge a special class name "Noscroll"
When too many items are selected, the default is to have scroll bars in the list of options, but if there are. Noscroll adornments, the scroll bars are not enforced
var noscroll = (Select.options.length < | | $ (SELECT). Hasclass ("Noscroll"));
if (/msie 6/i.test (window.navigator.userAgent)) {
Div.css ("height", noscroll?) "Auto": "215px"). CSS ("Overflow-y", Noscroll?) "Hidden": "scroll");
} else {
Div.css ("Max-height", Noscroll?) "10000px": "215px");
}

Here we judge a special class name "onside"
If there is a. Onside modifier, the pop-up option layer will be on the side, otherwise it is below
Note: here to use 2 functions locatebeside and Locatebelow is my JS library method, a little wait for another
$ (select). Hasclass ("onside")
? Div.locatebeside (This,-2)
: Div.locatebelow (this,-4);

Do some smart tuning on repetitive clicks <input> things like that
if (Window.activedummyselect = = Select) {
Div.slidetoggle (100);
} else {
Div.hide (). Slidedown (100);
Window.activedummyselect = select;
}

In the case of a scroll bar, we need to scroll the scroll bar to the position of the currently selected item.
if (!select.selectedindex > 6 && div[0].scrollheight > Div.height ()) {
Div.scrolltop ((select.selectedindex-3) * div[0].firstchild.offsetheight);
}
});
});

Finally, don't forget: When you click on the free area of the page, you should hide the <div #dummydata >
$ (document). Click (function (e) {
if (!$ (E.target). is (". Dummy") &&!$ (E.target). Is ("#dummydata")) {
$ ("#dummydata"). Hide ();
}
});
}
});

The above code said that the use of 2 methods: Locatebeside and Locatebelow, is my JS Library of the expansion of JQuery, by the way to give more than 2 methods locate and Locatecenter
:-) The code is as follows:

The code is as follows

Copy Code

$.fn.extend ({ Locate:function (x, y) { if (This.css ("position") = = "fixed") { Y-= $ (document). ScrollTop (); } Return This.css ({left:x, top:y}); }, Locatebeside:function (el, Adjustx) { var p = $ (EL). Offset (), W1 = $ (EL). Outerwidth (), W2 = This.outerwidth (), H2 = This.outerheight (), x = p.left + W1 + 5 + (Adjustx | | 0), y = p.top; if ($ (document). Width () < x + W2) { x = p.left–w2–5– (Adjustx | | 0); } if ($ (document). Height () < Y + H2) { y = p.top– (y + H2 +-$ (document). Height ()); } return this.locate (x, y); }, Locatebelow:function (el, Adjusty) { var p = $ (EL). Offset (); Return This.locate (P.left, P.top + $ (EL). Outerheight () + 3 + (Adjusty | | 0)); }, Locatecenter:function () { Return This.locate ( ($ (window). Width ()-this.width ())/2, ($ (window). Height ()-this.height ())/2 + $ (document). ScrollTop () ); } });

Finally, some examples of style sheet definitions are given, as well as demonstration effects:

The code is as follows

Copy Code

Input.dummy {background-image:url (/static/images/combo.gif); background-position:right 12px; Background-repeat: No-repeat; Cursor:pointer!important; } Input.dummy:hover, Input.dummy:focus {background-image:url (/static/images/combo_hover.gif);} #dummydata {position:absolute; z-index:20; border:1px solid #a4601e; Background-color: #393939; max-height:200px;over Flow:auto; } #dummydata a {display:block; color: #ddd; line-height:25px; text-indent:3px; text-overflow:ellipsis;} #dummydata a:hover {color: #198cef; text-decoration:none;} #dummydata. Matrix {width:208px; padding:5px}/* Matrix effect * * #dummydata. Matrix a {float:left; width:33%;} #dummydata. Matrix-large {width:640px padding:5px}//* Matrix-large effect * * #dummydata. Matrix-large a {float:left; width:25%;} #dummydata a.fullwidth {Float:none} #dummydata a.delimiter {float:none; width:100%; height:10px; visibility:hidden;} #dummydata a.selected {Color:yellow}