Home > Others

Multiselect multi-select drop-down box

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Implementation

 

 

<Input type = "hidden" id = "q_dueday" name = "q_dueday" value = "$ {basequerybean. q_dueday}"> // this parameter is directly used for the hidden domain background.
<Select id = "example" name = "example" multiple = "multiple" style = "width: 195px">
<C: foreach varstatus = "varstatus" begin = "1" End = "31" step = "1">
<Option value = "$ {varstatus. Count}" >$ {varstatus. Count} </option>
</C: foreach>
</SELECT>

------------------------------------------------------------------------------

JS Code implementation: first set the page to load and then execute this js method

$ (Function (){
// Initialize the selected
VaR selected = $ ("# q_dueday"). Val (); // This is the saved value, which is read from the database and assigned to the V variable.
Selected = ',' + selected + ','; // Add a separator, so that indexof can be compared.
VaR arr = selected. Split (',');
$ ('# Example option'). Each (function (){
If (selected. indexof (',' + this. Value + ',')! =-1)
This. Selected = true;
});
$ ("# Example"). multiselect ({// This ID is the drop-down box ID

Header: True,
Height: 400,
Minwidth: 100,
Checkalltext: "√ select all ",
Uncheckalltext: '× all deselected ',
Selectedtext: '# selected ',
Selectedlist: 10,
Hide: ["", 400],
Noneselectedtext: "===select === ",
Close: function (){
VaR values = $ ("# example"). Val ();

If (values = NULL) {// If the selected value is null. You can directly Leave the hidden domain empty to prevent caching.

$ ("# Q_dueday"). Val ('');

}
If (values. length> 0 ){
$ ("# Q_dueday"). Val (values );
}
}
});


});

--------------------------------------------------------------

// This method is reset

$ ("# Example"). multiselect ("uncheckall ");

--------------------------------------------------------------

// This method refreshes the current plug-in to prevent caching

$ ("# Example"). multiselect ("refresh") // This method refreshes the current plug-in immediately

---------------------------------------------------------------------

 

Recently, I have been working on multi-choice cascade, And I have posted the source code directly.

// Go to the backend to query data. This cascade is two levels.

Function testselect (t ){
If (t = NULL ){
Document. querymainform1.submit ();
}

$. Ajax ({
Type: "Post ",
URL: "$ {CTX}/urge-server/casecenterctrl/getselect. do? Id = "+ T,
Datatype: "JSON ",
Async: false,
Success: function (data ){
$ ("# Q_casebigcategory1"). Find ("option"). Remove ();
For (VAR I = 0; I <data. List. length; I ++ ){
$ ("# Q_casebigcategory1 "). append ("<option value = '" + data. list [I] [0] + "'>" + data. list [I] [1] + "</option> ");
}
// Display
Getmultiselect ();
}
});

}


// Display
Function getmultiselect (){
$ ("# Q_casebigcategory1"). multiselect ({
Header: True,
Height: 400,
Minwidth: 100,
Checkalltext: "√ select all ",
Uncheckalltext: '× all deselected ',
Selectedtext: '# selected ',
Selectedlist: 10,
Hide: ["", 400],
Noneselectedtext: "===select === ",
Close: function (){
VaR values = $ ("# q_casebigcategory1"). Val ();
If (values = NULL ){
$ ("# Q_dueday"). Val ('');
}
If (values. length> 0 ){
$ ("# Q_dueday"). Val (values );
}
}
});
$ ("# Q_casebigcategory1"). multiselect ("refresh") // This method refreshes the current plug-in immediately
}

 

 

 

 

 

---------------------------------------- Complete example ---------------------------------------------------

<Head>
<SCRIPT type = "text/JavaScript" src = "/static/jquery-multiselect/jquery-ui.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "/static/jquery-multiselect/jquery. multiselect. js"> </SCRIPT>
<Link type = "text/CSS" rel = "stylesheet" href = "/static/jquery-multiselect/CSS/jquery.multiselect.css"/>
<Link type = "text/CSS" rel = "stylesheet" href = "/static/jquery-multiselect/CSS/jquery-ui.css"/>
</Head>
<SCRIPT type = "text/JavaScript">
$ (Function (){
// If the ID is q_contractstatus, it is a value of the hidden domain on the page, which is selected at the front end or needs to be displayed after being transmitted in the background.
VaR selected = $ ('# q_contractstatus'). Val ();
Selected = ',' + selected + ',';
VaR arr = selected. Split (',');
// Cyclically determine which needs to be checked
$ ('# Contrstatus option'). Each (function (){
If (selected. indexof (',' + this. Value + ',')! =-1)
This. Selected = true;
});
// Here is the main content
$ ('# Contrstatus'). multiselect ({
Header: True,
Height: 400,
Minwidth: 100,
Checkalltext: '√ all select ',
Uncheckalltext: '× all deselected ',
Selectedtext: '# selected ',
Selectedlist: 4,
Hide: ['', 400],
Noneselectedtext: '= select = ',
Close: function (){
VaR values1 = $ ('# contrstatus'). Val ();
If (values1 = NULL ){
$ ('# Q_contractstatus'). Val ('');
}
If (values1.length> 0 ){
// Place the selected values in a hidden field. When querying, the hidden field is directly used.
$ ('# Q_contractstatus'). Val (values1 );
}}
});
});
</SCRIPT>
<Body>
<Select id = 'contrstatus' name = 'contrstatus' multiple = 'Multiple 'style = 'width: 0000p'>
<Option value = "1"> contract to be signed </option>
<Option value = "2"> confirm return </option>
<Option value = "3"> loan rejection </option>
<Option value = "4"> contract to be confirmed </option>
<Option value = "5"> contract confirmed </option>
<Option value = "6"> rejected </option>
<Option value = "7"> signed </option>
<Option value = "8"> to be credited </option>
<Option value = "9"> loan failed </option>
<Option value = "10"> credited </option>
<Option value = "71"> confirmed in preliminary review </option>
<Option value = "72"> review and return </option>
<Option value = "21"> contract timeout </option>
<Option value = "73"> paid off upon expiration </option>
<Option value = "74"> overdue payment </option>
<Option value = "75"> liquidated damages due to expiration </option>
<Option value = "76"> one-time settlement </option>
<Option value = "77"> return the loan review </option>
<Option value = "78"> financial return </option>
<Option value = "79"> signed (resubmit) </option>
<Option value = "11"> withdrawal </option> <option value = "12"> the customer gives up </option>
</SELECT>

 

Multiselect multi-select drop-down box

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More