jQuery的Chosen插件(带检索的下拉菜单)

Chosen是一款让又长又笨拙的选择框变得让用户感觉很友好的jQuery插件

<link rel="stylesheet" href="chosen.css">

<div>
    <select data-placeholder="请选择..." class="chosen-select" style="width:350px;" tabindex="2">
            <option value=""></option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>
    </select>
</div>
<script src="jquery-1.11.2.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
		    var config = {
		      '.chosen-select'           : {},
		      '.chosen-select-deselect'  : {allow_single_deselect:true},
		      '.chosen-select-no-single' : {disable_search_threshold:10},
		      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
		      '.chosen-select-width'     : {width:"95%"}
		    }
		    for (var selector in config) {
		      $(selector).chosen(config[selector]);
		    }
</script>

只需要将chosen引用即可使用。

妈蛋,花了我将近一个下午的时间总算搞定。
这里是原文地址:
http://www.aitiblog.com/test/chosen/

另外:可下载到本地测试。


你可能感兴趣的:(chosen)