[jQueryUI]-chosen:select drop-down selection box beautification plugin and problem "turn"

Hosen is a Select drop-down box that supports jquery to make the ugly, long select box look better and more convenient. Not only that, it expands the Select, adding the ability to automatically filter. It can group lists, and it can also disable certain selections.

First look at the effect of the plugin:

Compared with this, the original select style is not a weak explosion!

Come and arm Our select right now:

1, the first JS and CSS files to refer to the page inside:

?

123	<linkhref="js/jqueryUI/chosen/chosen.css"type="text/css"rel="stylesheet"/><scripttype="text/javascript"src="js/jquery.1.4.4.min.js"></script><scripttype="text/javascript"src="js/jqueryUI/chosen/chosen.jquery.js"></script>

2. Create a SELECT element, as follows:

?

1234567

<selectname="dept"style="width: 150px;" id="dept"class="dept_select">      <optionvalue="部门1">部门1</option>    <optionvalue="部门2">部门2</option>    <optionvalue="部门3">部门3</option>    <optionvalue="部门4">部门4</option>    <optionvalue="部门5">部门5</option></select>

3. Then call the chosen defined method in JS:

?

123	$(function(){    $(‘.dept_select‘).chosen();});

4, finish the work, the cock silk immediately become high rich handsome have wood has ~

　　

Some of the setup items for the chosen plugin:

1. Default text options

You can add the Data-placeholder property on the Select element to define the default text, which is the text that is displayed without selecting an option.

?

12345678

<selectdata-placeholder="选择部门"style="width:150px;"class="dept_select">    <optionvalue="-1"></option>    <optionvalue="部门1">部门1</option>    <optionvalue="部门2">部门2</option>    <optionvalue="部门3">部门3</option>    <optionvalue="部门4">部门4</option>    <optionvalue="部门5">部门5</option></select>

It is also important to note that the first selection under Select must be an empty option if you want to display the default text.

2, to its way
Option text is left-aligned by default, and you can set the right alignment by adding "Chzn-rtl" to the class attribute:

?

1	<selectdata-placeholder="选择部门" class="dept_select chzn-rtl"style="width:150px;">

3. js parameter setting

When calling the chosen () method, we can set some parameters:

Options	Description
No_results_text	Text with no search results displayed
Allow_single_deselect	Whether to allow deselect
Max_selected_options	Maximum number of selections when select is Multi-selected

?

12345

$(".some_select").chosen({    /*max_selected_options: 2,*/    no_results_text:"没有找到",    allow_single_deselect:true});

4. Events

A) Change event:

?

123	$(".dept-select").chosen().change(function(){    //do something...});

b) What happens when we need to dynamically update the selections under Select? Whenever you update a selection, the Liszt:updated event in chosen is triggered:

?

12	//...$(".dept-select").html(‘...<option>部门6</option>...‘);$(".dept-select").trigger("liszt:updated");

Other questions:

1, if you do not want to search box, it is very simple, with CSS to hide it is OK:

?

123	.chzn-container-single .chzn-search {    display:none;}

2, as the Kingdom of the procedural apes, have to consider IE6 and IE7 under the situation. OK, open with IE6, select or a pair of dick Silk!

Look chosen.jquery.js found in the chosen method has the following paragraph, IE6 and IE7 directly return the Select object itself:

?

123	if($.browser.msie && ($.browser.version === "6.0" || ($.browser.version === "7.0" && document.documentMode === 7))) {    returnthis;}

This section JS comment off, reopen IE6 and 7, no longer dick Silk has wood! Although the arrow image and search image opaque disharmony (with JS processing under harmony) ...

Finally can happily in the IE6 use, and will find the problem, or the pit Dad's IE6 and 7! If the 2 Select is not in harmony with each other, please see:

　

Click to open the selection department, and this is the trouble! See figure:

　

Well, this should be the Z-index problem, the CSS modified, the results of various div z-index to vomit or the death.

Finally there is no way, think of a stupid way, dynamic change all Chzn-container Z-index, when click on the Select to let the current container z-index the highest, Let the chzn-container of the other select Z-index lower. Find this method in Chosen.jquery.js:

?

123456

Chosen.prototype.activate_field = function() {    this.container.addClass("chzn-container-active");    this.active_field = true;          this.search_field.val(this.search_field.val());    returnthis.search_field.focus();};

Change this method to:

?

123456789

Chosen.prototype.activate_field = function() {    this.container.addClass("chzn-container-active");    this.active_field = true;          this.search_field.val(this.search_field.val());    varzindex = 1010;    this.container.css(‘z-index‘,‘1010‘)    $(‘.chzn-container‘).not(this.container).css(‘z-index‘,--zindex);    returnthis.search_field.focus();};

Of course, you can also give different z-index in the order that you generate the. Chzn-container, so you don't have to reset it every time you click Select.

At this point, IE6 and IE7 under the use of chosen basically no problem ...

　　

Original articles, reproduced please specify. This article link address: [jQueryUI]-chosen:select dropdown selection box beautify plugins and problems

[jQueryUI]-chosen:select drop-down selection box beautification plugin and problem "turn"