Lightning component implements a simple list of multiple options

1.MultipleSelect.cmp

 

<aura:component>
<!-- 可选的选项列表MAP -->
<aura:attribute name="optionMap" type="Map"/>
<!-- 可选的选项列表 -->
<aura:attribute name="optionList" type="List" default="[{key:'none',value:'none',selected:false}]"/>
<!-- 已选的选项列表值，以分号分隔 -->
<aura:attribute name="selectValue" type="String" default="none"/>
<!-- 已选的选项列表Label，以分号分隔 -->
<aura:attribute name="selectLabel" type="String" default="none"/>
<!-- label -->
<aura:attribute name="label" type="String" default=""/>
<!-- 显示label样式 -->
<aura:attribute name="variant" type="String" default="label-hidden" description="to hide label, add 'label-hidden' as a variant" />
<!-- 宽度 -->
<aura:attribute name="width" type="String" default="25vw;" />
<!-- onchange事件是否到调用组件中执行 -->
<aura:attribute name="despatchChange" type="Boolean" default="false" />
<!-- 注册事件 -->
<aura:registerEvent name="selectChange" type="c:ElementChangeEvent" />
<!-- 初始化方法 -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div>
  <div class="slds-form-element" style="{!'width:'+v.width}">
    <label class="{!if(v.variant=='label-hidden','slds-hide','slds-form-element__label')}" for="combobox-id-1">{!v.label}</label>
    <div class="slds-form-element__control">
      <div class="slds-combobox_container slds-size_small" style="{!'width:'+v.width}">
        <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-picklist" aria-expanded="false" aria-haspopup="listbox" role="combobox" aura:id="combobox_picklist">
          <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none" style="{!'width:'+v.width}">
            <input class="slds-input slds-combobox__input" id="combobox-unique-id-20" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" type="text" placeholder="Select an Option" readonly="true" value="{!v.selectLabel}" οnclick="{!c.showListBox}" style="{!'width:'+v.width}"/>
            <span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right" title="Description of icon when needed">
              <lightning:icon iconName="utility:down" size="x-small" class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" />
              <span class="slds-assistive-text">Description of icon when needed</span>
            </span>
          </div>
          <div id="listbox-unique-id" role="listbox" οnmοuseleave="{!c.mouseLeave}">
            <ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
              <aura:iteration items="{!v.optionList}" var="option" indexVar="index">
                <li role="presentation" class="slds-listbox__item" οnclick="{!c.changeSelected}" data-index="{!index}">
                  <div id="listbox-option-unique-id-01" class="{!'slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center'+(option.selected==true?' slds-is-selected':'')}" role="option">
                    <span class="slds-media__figure">
                        <lightning:icon iconName="utility:check" size="x-small" class="slds-icon-utility-check slds-current-color slds-listbox__icon-selected slds-icon_container" />
                    </span>
                    <span class="slds-media__body">
                      <span class="slds-truncate" title="{!option.value}"> {!option.label}</span>
                    </span>
                  </div>
                </li>
              </aura:iteration>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</aura:component>

2.MultipleSelectController.js

({
    doInit:function(cmp, event, helper)
    {
        var optionMap=cmp.get('v.optionMap');
        var selectValue=cmp.get('v.selectValue');
        console.log(selectValue);
        var selectLabel=null;
        var optionList=[];
        for (var key in optionMap) 
        {
            var selected=false;
            if(selectValue!=undefined&&(selectValue.indexOf((key+';'))!=-1||selectValue.indexOf((';'+key))!=-1||selectValue==key)) selected=true;
            optionList.push({value:key,label:optionMap[key],selected:selected});
            if(selected)
            {
                if(selectLabel==null) selectLabel=optionMap[key];
                else selectLabel+=';'+optionMap[key];
            }
        }
        console.log(optionList);
        cmp.set('v.optionList',optionList);
        cmp.set('v.selectLabel',selectLabel);
    },
  showListBox:function(cmp, event, helper) 
  {
      helper.controlListBox(cmp, event, helper);
  },
  changeSelected:function(cmp, event, helper)
  {
      var selectValue=null;
      var selectLabel=null;
      var optionList=cmp.get('v.optionList');
      var target = event.currentTarget;
      var index = target.dataset.index;
    var selected = optionList[index].selected==true?false:true;
    optionList[index].selected=selected;
    for (var i = 0; i < optionList.length; i++) 
    {
        if(optionList[i].selected)
        {
            if(selectValue==null)
            {
                selectValue=optionList[i].value;
                selectLabel=optionList[i].label;
            }
            else
            {
                selectValue+=';'+optionList[i].value;
                selectLabel+=';'+optionList[i].label;
            }
        }
    }
    cmp.set('v.optionList',optionList);
    cmp.set('v.selectLabel',selectLabel);
    cmp.set('v.selectValue',selectValue);
    if(cmp.get('v.despatchChange')) 
    {  
      helper.despatchSelectChangeEvent(cmp,selectValue);
    }
    /*helper.controlListBox(cmp, event, helper);*/
  },
  mouseLeave:function(cmp, event, helper)
  {
      helper.controlListBox(cmp, event, helper);
  },  
})

3.MultipleSelectHelper.js

({
   controlListBox:function(cmp, event, helper) 
  {
      var combobox_picklist = cmp.find('combobox_picklist');
    $A.util.toggleClass(combobox_picklist, 'slds-is-open');
  },
  despatchSelectChangeEvent: function(cmp,element){
    var compEvent = cmp.getEvent("selectChange");
    compEvent.setParams({ "element": element});
    compEvent.fire();
  }
})

4.调用示例

<c:MultipleSelect optionMap="{!v.fundinfo.statusMap}" despatchChange="true" selectValue="{!v.fundinfo.statusQuery}" selectChange="{!c.queryChange}" label="状态筛选" variant="standard"/>

5.效果展示