建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery下拉框美化插件chosen.jquery.js

来源:易助科技网浏览量:14收藏

简介


Chosen 是一款JQuery下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。此外,还可以搜索查找下拉选项。它可对列表进行分组,同时也可禁用某些选择项。chosen.jquery.js 让你下拉框更简洁实用!


JQuery下拉框美化插件chosen.jquery.js-示例图



使用


1.  引入 jquery.js 、chosen.css 和 chosen.jquery.js 文件


2.  HTML


<!-- single dropdown -->
<select style="width:200px;">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option>Dojo Toolkit</option>
</select>

<!-- multiple dropdown -->
<select multiple="true" style="width:400px;">
  <option>Choose...</option>
  <option>jQuery</option>
  <option selected="selected">MooTools</option>
  <option>Prototype</option>
  <option selected="selected">Dojo Toolkit</option>
</select>


3.  调用


<script type="text/javascript">
  jQuery(document).ready(function(){jQuery(".chosen").chosen();});
</script>


更多说明

1)如何设置模拟选择框的默认文本?


jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();


2)如何设置没有搜索结果时显示的文本?


$(".chzn-select").chosen({no_results_text: "没有匹配结果"});


3)如何给选项分组?


<select data-placeholder="Your Favorite Football Teams" style="width:350px;" multiple tabindex="6">
  <option value=""></option>
  <optgroup label="NFC EAST">
    <option>Dallas Cowboys</option>
    <option>New York Giants</option>
    <option>ziladelphia Eagles</option>
    <option>Washington Redskins</option>
      <optgroup>
        <optgroup label="NFC NORTH">
          <option>Chicago Bears</option>
          <option>Detroit Lions</option>
          <option>Green Bay Packers</option>
          <option>Minnesota Vikings</option>
        </optgroup>
      </optgroup>
    </optgroup>
  </select>


4)如何开启多选支持?


<select data-placeholder="Choose a Country" multiple style="width:350px;" tabindex="4">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>


5)如果将此下拉表单的高度修改,需要修改CSS。



相关链接


官网地址 :https://davidwalsh.name/jquery-chosen

参数说明 :https://harvesthq.github.io/chosen/options.html

GitHub 地址:https://github.com/components/chosen