Self-made operation drop-down list box (select) Three jquery plug-ins (Ajax fill, linkage, add options)

Source: Internet
Author: User
The first is the Ajax filling plug-in filloptions. This plug-in can obtain data through Ajax and add the data to the drop-down list box. The data format supports XML and JSON formats. The plug-in definition is as follows:
Filloptions (URL, options)
Parameter description
URL: the address of the Ajax request. options must include the following parameters:
Datatype: the format of the data returned by the Ajax request, which can be "XML" or "JSON". The default value is "JSON"
Textfield: The text field of the drop-down list box option in the data returned by the Ajax request. The default value is "text"
Valuefiled: The option value field in the drop-down list box returned by the Ajax request. The default value is "value"
Keepold: boolean type, whether to retain the original option of the drop-down list box option, which is not retained by default.
Selected: numeric type. The number of items after the fill option is selected. The default value is 0.
Example: $ ( " # Select1 " ). Filloptions ( " Handler1.ashx? Type = JSON " , {Datatype:"JSON", Textfield:"Province", Valuefiled:"Provinceid"} );

Instance Description: select1 is a drop-down list box on the page. Access "handler1.ashx? Type = JSON ", return" [{"provinceid": "110000", "Province": "Beijing" },{ "provinceid": "120000 ", "Province": "Tianjin"}] ", and then generate the option of the drop-down list box and add it to select1 through the specified textfield and valuefiled parameters. For more examples, see test.htm.
The drop-down list box Association plug-in cascadingselect, which is created based on the above filloptions plug-in. It can implement association between two drop-down lists, which are defined as follows:
Cascadingselect (target, URL, options, endfn)
Parameter description:
Target: drop-down list box to be linked. Required
URL: the URL of the Ajax request. The options parameter must be similar to filloptions.
Parameter: The parameter name of the value returned when an Ajax request is sent. required.
Endfn: the type is function, which is executed after linkage.
Example:

$ ( " # Select1 " ). Cascadingselect (
$ ( " # Select2 " ),
" Handler1.ashx? Type = JSON " ,
{Datatype:"JSON", Textfield:"City", Valuefiled:"Cityid", Parameter:"P"} ,
Function () {
$ ( " # Select2 " ). Addoption ( " Select " , " -1 " , True , 0 );
$ ( " # Select3 " Pai.html ( "" );
$ ( " # Select3 " ). Addoption ( " No options " , " -1 " , True , 0 );
}
);

Instance Description: select1, select2, and select3 are all drop-down lists on the page. By setting the parameter: "P", a "handler1.ashx? P = xxx & type = JSON "is used as an Ajax request. XXX is the value selected by select1, and filloptions is used to fill the option of select2. For more information, see the three-level linkage between provinces, cities, and cities in test1.htm.
Addoption, a plug-in for adding a list item, is relatively simple. It is used to add a list item to the drop-down list box. Definition:
Addoption (text, value, selected, index)
Parameter description:
Text: text type, list item text
Value: text type, list item Value
Selected: boolean type, whether to select the added list item index: numeric type, adding location
Example: $ ( " # Select2 " ). Addoption ( " Select " , " -1 " , True , 0 );

Instance Description: Insert a list item whose text is "Please select", value is "-1" to the top of select2, And it is selected
Http://bbs.jquery.org.cn/viewthread.php? Tid = 637 & extra = Page % 3d1 or http://download.csdn.net/user/luq885
.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.