1

I have a picklist in a lightning component. This picklist is displaying 12 values (from 1 to 12)

Here is the picklist :

<aura:attribute name="mois_exp" type="Integer" />
<aura:attribute name="mois_values" type="Integer[]"/>

<ui:inputSelect aura:id="mois_exp" class="slds-input" value="{!v.mois_exp}">
   <aura:iteration items="{!v.mois_values}" var="val">
       <ui:inputSelectOption text="{!val}" />
   </aura:iteration>
</ui:inputSelect>

The javascript controller :

doInit : function(component, event, helper) {
    var action = component.get("c.getListOfMonths");

    //get the values of the month picklist
    action.setCallback(this, function(a) {
        var result = a.getReturnValue();
        component.set('v.mois_values', result);
    });

    $A.enqueueAction(action);
},

And the apex class getListOfMonths :

@AuraEnabled
public static List<Integer> getListOfMonths(){
    List<Integer> months = new List<Integer>();

    for(Integer i = 1; i < 13; i++){
        months.add(i);
    }
    return months;
}

The problem is that when I click the picklist to show the values, I can see the 12 value but not select one. The only value I can "select" is the first value.

How can I make the other value availables to be selected ?

1
  • Why are you getting the list of months with a server call? Couldn't you just add the months as a default attribute? ie default="[1,2,3,4,5,6,7,8,9,10,11,12]" Commented Jun 1, 2017 at 18:42

5 Answers 5

2

I resolve my problem by using lightning:select tag :

<lightning:select aura:id="mois_exp" class="slds-form-element__control" name="mois_exp" label="Mois d'expiration" onchange="{!c.changeMonth}">
    <option value="" text=""></option>
    <aura:iteration items="{!v.mois_values}" var="val">
              <option value="{!val}" text="{!val}"></option>
    </aura:iteration>
</lightning:select>
1

It's a dependent picklist,hope this may clear your most of doubts.

Component Code:-

<aura:component controller="fetchPicklistOptsController">
<ltng:require styles="{! $Resource.SLDS420 + '/assets/styles/salesforce-lightning-design-system.css'}"/> 
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="objInfo" type="account" default="{sobjectType : 'Account'}" />
<aura:attribute name="related" type="Boolean" default="true" />
 <div class="slds-size--1-of-2">
<div class="slds-form-element">
  <label class="slds-form-element__label" for="select-01">Industry</label>
  <div class="slds-select_container">
     <ui:inputSelect aura:id="accIndustry" class="slds-select"  change="{!c.onPicklistChange}"/>
  </div>
   <label class="slds-form-element__label" for="select-01">OwnerShip</label>
   <div class="slds-select_container">
     <ui:inputSelect aura:id="accOwnership" class="slds-select"   disabled="{!v.related}" />
  </div>
  </div>
 </div>
</aura:component>

JS Controller:-

({
doInit: function(component, event, helper) {
    helper.fetchPickListVal(component, 'Industry', 'accIndustry');
},
onPicklistChange: function(component, event, helper) {
    component.set("v.related",false);
    helper.fetchPickListVal(component, 'Ownership', 'accOwnership');
   }

})

Helper Code:-

({
fetchPickListVal: function(component, fieldName, elementId) {
    var action = component.get("c.getselectOptions");
    action.setParams({
        "objObject": component.get("v.objInfo"),
        "fld": fieldName
    });
    var opts = [];
    action.setCallback(this, function(response) {
        if (response.getState() == "SUCCESS") {
            var allValues = response.getReturnValue();

            if (allValues != undefined && allValues.length > 0) {
                opts.push({
                    class: "optionClass",
                    label: "--- None ---",
                    value: ""
                });
            }
            for (var i = 0; i < allValues.length; i++) {
                opts.push({
                    class: "optionClass",
                    label: allValues[i],
                    value: allValues[i]
                });
            }
            component.find(elementId).set("v.options", opts);
        }
    });
    $A.enqueueAction(action);
},

})

Application:-

<aura:application extends="force:SLDS">
 <c:MultiSelectPicklist />
</aura:application>

ServerSide Controller:-

public class fetchPicklistOptsController {
 @AuraEnabled
 public static List < String > getselectOptions(sObject objObject, string fld) {
List < String > allOpts = new list < String > ();
// Get the object type of the SObject.
Schema.sObjectType objType = objObject.getSObjectType();
// Describe the SObject using its object type.
 Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
// Get a map of fields for the SObject 
map < String, Schema.SObjectField > fieldMap = objDescribe.fields.getMap(); 
list < Schema.PicklistEntry > values =
fieldMap.get(fld).getDescribe().getPickListValues();
 // Add these values to the selectoption list.
for (Schema.PicklistEntry a: values) {
 allOpts.add(a.getValue());

}

 allOpts.sort();
return allOpts;
}

}

If you found it's good ,mark it as best solution.

1

I'm not sure why this makes a difference, but when I change all the data types from "Integer" to "String" (in Lightning code and Apex), it works.

This also requires changing the following line in the Apex controller to:

months.add(String.valueOf(i));

There must be something about Integer values in the select options that causes problems, but I'm not sure what. But using string values definitely seems to work.

Hope this info helps you solve this, or at least troubleshoot better why Integers cause problems in select options. Maybe somebody else knows?

0

I think that you need to set the label as well when you create the options i.e.

<ui:inputSelectOption text="{!val}" label="{!val}"/>
1
  • I try your solution but it doesn't resolve my problem...
    – dou
    Commented May 16, 2017 at 14:14
0

You can change your code as

<ui:inputSelect aura:id="mois_exp" class="slds-input" change="{!c.change}">
   <aura:iteration items="{!v.mois_values}" var="val">
       <ui:inputSelectOption text="{!val}" />
   </aura:iteration>
</ui:inputSelect>

write code in js as :-

({ 
     change: function(cmp) {
         var dynamicCmp = cmp.find("mois_exp");
         resultCmp.set("v.mois_exp", dynamicCmp.get("v.value"));
     }

})
2
  • thanks for the answer, but that doesn't resolve my problem... I'm still not able to select another value than 1.
    – dou
    Commented May 16, 2017 at 14:43
  • you can try <ui:inputSelectOption text="{!val}" disabled="false"/> Commented May 16, 2017 at 19:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .