《富锦囊》也能花式甩出下拉选择菜单？select2.js逐行紧扣干货演绎！

前端

2023-06-06 00:53:45

花式甩出下拉选择菜单，select2.js 惊艳全场

下拉选择菜单是前端开发中的常客，也是用户与网页互动的重要元素。而 select2.js 插件的横空出世，为我们打造美观且强悍的下拉选择菜单提供了福音。接下来，我们将踏上 select2.js 的惊艳之旅！

初识 select2.js，开启惊艳之路

轻盈兼容，跨越浏览器界限

select2.js 兼容 Chrome、Firefox、Safari、Edge 和 IE 等主流浏览器，让你的下拉选择菜单在不同浏览器中都能轻松运作。

小巧而强，功能齐全不拖累

select2.js 小巧精悍，不会给你的网页带来负担，但它又功能强大，足以满足你的各种需求。

自定义随心，打造个性之选

select2.js 高度可定制，你可以随心所欲地调整下拉选择菜单的外观和行为，使其完美融入你的网页设计。

实战教学，逐行逐句手把手

创建基本下拉框

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<script>
  $(".js-example-basic-single").select2();
</script>

添加搜索功能

<select class="js-example-basic-single" style="width: 300px;">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<script>
  $(".js-example-basic-single").select2({
    minimumResultsForSearch: -1 // 始终显示搜索框
  });
</script>

支持多选

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<script>
  $(".js-example-basic-multiple").select2();
</script>

使用远程数据源

<select class="js-example-data-ajax">
  <option value=""></option>
</select>

<script>
  $(".js-example-data-ajax").select2({
    ajax: {
      url: "/api/states",
      dataType: 'json',
      delay: 250
    }
  });
</script>

级联下拉框

<select class="js-example-data-ajax-parent">
  <option value=""></option>
</select>
<select class="js-example-data-ajax-child">
  <option value=""></option>
</select>

<script>
  $(".js-example-data-ajax-parent").select2({
    ajax: {
      url: "/api/states",
      dataType: 'json',
      delay: 250
    }
  }).on("change", function() {
    var parentId = $(this).val();
    $(".js-example-data-ajax-child").select2({
      ajax: {
        url: "/api/cities/" + parentId,
        dataType: 'json',
        delay: 250
      }
    });
  });
</script>