zoukankan      html  css  js  c++  java
  • bootstrap select2 使用简单介绍

    1. 基本属性配置: 

    $("#select2-id").select2({
         templateResult : formatState, // 列表带图片
         templateSelection : formatState, // 选中的带图片
         language: "zh-CN", //设置 提示语言
          "100%", //设置下拉框的宽度
         placeholder: "请选择", // 空值提示内容,选项值为 null
         //placeholder: {id: '', text: "请选择"}, // 同上,这里默认空值为 ''
         minimumInputLength: 10  //最小需要输入多少个字符才进行查询
         allowClear: true, //是否允许清空选中
         tags: false,  //设置必须存在的选项 才能选中,设置不存在的值则为null,如果 placeholder: {id: '', text: "请选择"} 则为 ''
         selectOnClose: true, // 如果没有手动选中,下拉框消失后会自动选中被hover的选项 (不建议使用)
         closeOnSelect: false, // 选择后下拉框不会关闭(单选-不建议使用)
         minimumResultsForSearch: Infinity, // 隐藏搜索框
         theme: "classic", // 样式
         maximumSelectionLength: 3,  // 多选 - 设置最多可以选择多少项
         tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是:tags: true
    });
    

      2. 常用基本操作:

    2. 操作:
    (1) 移除/销毁
      $("#select2-id").select2("destroy");

    (2)清空下拉框列表值
      $("#select2-id").empty();

    (3)设置下拉列表 
      // 单选 - 必须有一项为空值,否则默认选择第一项(如果必须选择一项可以不设置空值)
      $("#select2-id").append($("<option>", {value: '', text: '全部'}));
      $("#select2-id").append($("<option>", {value: 'value1', text: 'text1'}));
      $("#select2-id").append($("<option>", {value: 'value2', text: 'text2'}));

      // 多选 - 不能有一项为空值,否则再清空时会出BUG
      $("#select2-id").append($("<option>", {value: 'value1', text: 'text1'}));
      $("#select2-id").append($("<option>", {value: 'value2', text: 'text2'}));

    (4)赋值
      // 赋值 - 单选
      $("#select2-id").val('value').trigger("change");

      // 赋值 - 多选
      $("#select2-id").val(['value1','value2']).trigger("change");

    (5)获取中值
      // 多选返回数组,单选返回字符串
      $("#select2-id").val();

    更多操作可参考:http://www.cnblogs.com/landeanfen/p/5099332.html

            http://www.cnblogs.com/cloudshadow/p/bootstrap_select2.html

  • 相关阅读:
    关于sifari兼容性的一个问题
    HTML标签的应用(新手)
    HTML标签的应用(新手)
    未完成的开锁动画演示
    HTML标签的应用(新手)
    HTML新手向
    C++
    STL之set
    C++输入输出
    提升一下逼格
  • 原文地址:https://www.cnblogs.com/hunterCecil/p/7593622.html
Copyright © 2011-2022 走看看