How To show picklist on Visualforce using Lightning Components and apex class

Hi Folks,

Lightning! Is it..

I have a requirement for you and that is very basic for new beginners who wants to learn lightning.

Requirement:-

To show picklist on visualforce using lightning component and also print the selected value. 

Lets start with creating the component . We need to have a component , a controller and lightning out app.
In component, we will be using two attributes to which one will contain the selected value and another attribute which will contain the picklist values.

Also we will have a client side controller that will be called on load of component and whenever there is change in picklist value selection.

Component code snippet below:-

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <ltng:require styles="{!$Resource.slds232 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="mySelectedText" type="String" default="some string"/>
    <aura:attribute name="contactLevel" type="set" default="test" />
    <aura:handler name="init" value="{!this}" action="{!c.onSelectChange}"/>
  <div>
    <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onSelectChange}">
        <aura:iteration items="{!v.contactLevel}" var="level">
             <ui:inputSelectOption text="{!level}" label="{!level}"/>
        </aura:iteration>
    </ui:inputSelect>
  </div>
    <div>
        Selected value is :----  {!v.mySelectedText}
    </div>
</aura:component>

Visualforce page code snippet

<apex:page controller="linkforLightning">
<apex:includeLightning />
<apex:outputPanel id="twest" rendered="true">

 <div style="width:100%;height:100px;" id="Containers" />

 <script>
 $Lightning.use("AnkushTest:onSelectChange", function() {
 $Lightning.createComponent("AnkushTest:onSelectPicklist",
 {  
     contactLevel:"{!listOfInteger}"
  
 },
 "Containers",
 function(cmp) {
 console.log('Component created');
 });
 });
 </script>
 </apex:outputPanel>
</apex:page>

Controller.js :-

({
 onSelectChange : function(component, event, helper) {
    var selected = component.find("levels").get("v.value");
        alert('Selected Value is '+selected);
        
      
    component.set("v.mySelectedText",selected);
        
}
})

Lightning App

<aura:application access="GLOBAL"  extends="ltng:outApp">
    <aura:dependency resource="AnkushTest:OnSelectPickList" />
</aura:application>

This how it will be rendered