Select2:基于 jQuery 的选择框替代品

文档导航：

• Select2-官方网
• Select2-中文网
• Select2-GitHub

• JSONPlaceholder

  测试案例：

   <script>
    $(function () {
      $('select').select2({
        theme: 'classic',
        // 占位符
        placeholder: '这是我的占位符',
        // 显示清除选择
        allowClear: true,
        // 开启多选
        multiple: false,
        // 动态创建选项
        tags: false,
        // 远程数据源
        ajax: {
          url: 'http://jsonplaceholder.typicode.com/posts',
          dataType: 'json',
          // 搜索参数
          data: function (params) {
            var query = {
              search: params.term,
              type: 'public',
            };
            // 查询参数将是 ?search=[term]&type=public
            return query;
          },
          cache: true,
          processResults: function (data) {
            // results结果对象数组中必须含有id和text属性
            let datas = $.map(data, function (value) {
              value.text = value.title;
              return value;
            });
            return {
              results: datas,
            };
          },
        },
        // 自定义下拉结果呈现方式-可为html或者JQ
        templateResult: templateResult,
        //自定义选择项在输入框中的呈现方式-可为html或者JQ
        templateSelection: templateSelection,
      });
    });
  
    function templateSelection(state) {
      console.log(state);
      return state.text;
    }
  
    function templateResult(state) {
      return state.text;
    }
  </script>

注意事项：

• 为select赋值操作时,需在界面渲染完成相关元素被绑定之后操作。普通select赋值不生效，可链式触发change事件赋值。
• select.js引入需要在JQ引入之后，当发现错误时可尝试切换JQ版本。
• 若是需要对已经绑定过的同一个select控件切换数据源,可以在再次重新绑定源之前先remove掉上一次绑定的option.