JQuery Easyui Form Plugin-combobox combo box

Extended from $.fn.combo.defaults. Overrides the default defaults through $.fn.combobox.defaults.

The combo box (ComboBox) displays an editable text box and a drop-down list where the user can select one or more values from the drop-down list. Users can enter text directly to the top of the list, or select one or more existing values from the list.

Depend on

• Combo

Usage

Creates a combo box (ComboBox) from the <select> element with a predefined structure.

<select id= "CC" class= "Easyui-combobox" name= "dept" style= "width:200px;" >    <option value= "AA" >aitem1</option>    <option>bitem2</option>    <option >bitem3</option>    <option>ditem4</option>    <option>eitem5</option></ Select>

Create a combo box (ComboBox) from the <input> tag.

<input id= "CC" class= "Easyui-combobox" name= "dept"    data-options= "Valuefield: ' id ', TextField: ' text ', url: ' Get _data.php ' ">

Use JavaScript to create a combo box (ComboBox).

<input id= "CC" name= "dept" value= "AA" >

$ (' #cc '). ComboBox ({    URL: ' Combobox_data.json ',    Valuefield: ' id ',    textField: ' text '});

Create a two-dependent combo box (ComboBox).

<input id= "cc1" class= "Easyui-combobox" data-options= "    Valuefield: ' id ',    textField: ' text ',    URL: ' Get _data1.php ',    onselect:function (rec) {    var url = ' get_data2.php?id= ' +rec.id;    $ (' #cc2 '). ComboBox (' reload ', URL);    } " ><input id= "CC2" class= "Easyui-combobox" data-options= "Valuefield: ' id ', TextField: ' Text '" >

Examples of JSON data formats:

[{    "id": 1,    "text": "Text1"},{    "id": 2,    "text": "Text2"},{    "id": 3,    "text": "Text3",    " Selected ": true},{    " id ": 4,    " text ":" Text4 "},{    " id ": 5,    " text ":" Text5 "}]

Property

The property expands from the combination (combo), and the following is the property added for the combo box (ComboBox).

name	type	Description	Default Value
Valuefield	String	The name of the underlying data that is bound to value on the combo box (ComboBox).	Value
TextField	String	The name of the underlying data that is bound to the text on the combo box (ComboBox).	Text
GroupField	String	Indicates the field to be grouped. This property is available from version 1.3.4.	Null
Groupformatter	function (Group)	Returns the grouped text to be displayed on the grouped item. This property is available from version 1.3.4. code example: $ (' #cc '). ComboBox ({groupformatter:function (group) {return ' <span style= "color:red" > ' + group + ' </span> ';}});
Mode	String	Defines how the list data is loaded when the text changes. If the combo box (ComboBox) is loaded from the server, it is set to ' remote '. When set to ' remote ' mode, the value entered by the user will be sent to the server as an HTTP request parameter named ' Q ' to obtain new data.	Local
Url	String	The URL from the remote load list data.	Null
Method	String	The HTTP method used to retrieve the data.	Post
Data	Array	The list data that is loaded. code example: <input class= "Easyui-combobox" data-options= "Valuefield: ' label ', TextField: ' Value ', data: [{label: ' Java ', Value: ' Java '},{label: ' Perl ', Value: ' Perl '},{label: ' Ruby ', Value: ' Ruby '}] "/>	Null
Filter	function	Defines how local data is filtered when ' mode ' is set to ' local '. The function has two parameters: Q: Text entered by the user. Row: The line data in the list. Returns true to allow the row to be displayed. code example: $ (' #cc '). ComboBox ({filter:function (q, Row) {var opts = $ (this). ComboBox (' Options '); return Row[opts.textfield]. IndexOf (q) = = 0;}});
Formatter	function	Defines how rows are rendered. The function has one parameter: row. code example: $ (' #cc '). ComboBox ({formatter:function (row) {var opts = $ (this). ComboBox (' Options '); return Row[opts.textfield];}});
Loader	function (Param,success,error)	Defines how data is loaded from a remote server. Returns false to cancel the action. The function has the following parameters: PARAM: The Parameter object to upload to the remote server. Success (data): The callback function that will be called when the data is obtained successfully. Error (): The callback function that will be called when the fetch data fails.	JSON loader
Loadfilter	function (data)	Returns the filtered data to be displayed. This property is available from version 1.3.3.

Event

The event expands from the combination (combo), and the following is an event added for a combo box (ComboBox).

name	Parameters	Description
Onbeforeload	Param	Fires before the request loads the data, and returns False to cancel the load action. code example: Change the HTTP request parameters before load data from server$ (' #cc '). ComboBox ({onbeforeload:function (param) {param. id = 2;param.language = ' js ';}});
Onloadsuccess	None	triggered when the remote data load is successful.
Onloaderror	None	triggered when the remote data load fails.
OnSelect	Record	Triggered when the user selects a list item.
Onunselect	Record	Triggered when a user cancels the selection of a list item.

Method

The method extends the self-assembly (combo), and the following is a method for adding or overriding a combo box (ComboBox).

name	Parameters	Description
Options	None	Returns the Options object.
GetData	None	Returns the loaded data.
LoadData	Data	Loads the local list data.
Reload	Url	Requests the remote list data. The ' url ' parameter to override the original URL value. code example: $ (' #cc '). ComboBox (' Reload '); Reload list data using the old url$ (' #cc '). ComboBox (' Reload ', ' get_data.php '); Reload list data using new URL
Setvalues	Values	Sets an array of combo box (ComboBox) values. code example: $ (' #cc '). ComboBox (' Setvalues ', [' 001 ', ' 002 ']);
SetValue	Value	Sets the value of the combo box (ComboBox). code example: $ (' #cc '). ComboBox (' SetValue ', ' 001 ');
Clear	None	Clears the value of the combo box (ComboBox).
Select	Value	Select the specified option.
Unselect	Value	Deselect the specified option.

JQuery Easyui Form Plugin-combobox combo box