Ajax drop-down list box (select) jquery plug-in

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 URL of the Ajax request, required
Options includes 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 the following test.htm drop-down list box Association plug-in cascadingselect. This plug-in is created based on the above filloptions plug-in and can implement association between two drop-down lists. The definitions are as follows: cascadingselect) parameter description: target: the drop-down list box to be linked. The URL must be the address of the Ajax request. options must be similar to filloptions. A parameter is added: the Parameter Name of the value returned when an Ajax request is sent, which must be endfn: the type is function. After the association is completed, the execution instance is as follows: $ ("# select1 "). cascadingselect (
$ ("# Select2 "),
"Handler1.ashx? Type = JSON ",
{Datatype: "JSON", textfield: "city", valuefiled: "cityid", parameter: "p "},
Function (){
$ ("# Select2"). addoption ("select", "-1", true, 0 );
$ ("# Select3" ).html ("");
$ ("# Select3"). addoption ("no option", "-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 index: numeric type of the list item to be added. The add location instance is as follows: $ ("# select2 "). addoption ("select", "-1", true, 0 );
Instance Description: Insert a list item whose text is "select" and value is "-1" to the top of select2.

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.