<aura if is true> not working as expected

Question

I wrote a following code for component but it is not giving result as i expected, Component code

<aura:component >
    <aura:attribute name="parentOptions" type="List"/>
    <aura:attribute name="dependentPicklist" type="Object"/>
    <aura:attribute name="dependentOptions" type="List"/>
    <aura:attribute name="disabledPick" type="Boolean" default="true"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <div class="slds-container--center slds-container--small slds-m-top--small">
        <div class="slds-form--stacked">

            <lightning:select name="parentPicklist" label="Profile" aura:id="parentPicklist" onchange="{!c.PickChange}">
                <option value="">None</option>
                <aura:iteration items="{!v.parentOptions}" var="p">
                    <option value="{!p.value}">{!p.text}</option>
                </aura:iteration>
            </lightning:select>

            <lightning:select name="dependentPicklist" label="PermissionSet" disabled="{!v.disabledPick}">
                <option value="">None</option>
                <aura:iteration items="{!v.dependentOptions}" var="d">
                    <option value="{!d.value}">{!d.text}</option>
                    <aura:if isTrue="{!v.dependentOptions == 'Report'}" >
                        <a href="https://map.baidu.com"> Visit baidu!</a>

                        </aura:if>  
                </aura:iteration>


            </lightning:select>




        </div>        
    </div>

</aura:component>

controller code

({
    doInit : function(component, event, helper) {
        var pVals = [
            {text:"Profile", value: "Profile"},
            {text:"PermissionList", value: "PermissionList"}
        ];

        var dPick = {

            "PermissionList" : [
                {text:"Report", value: "Report"},
                {text:"Dashboard", value: "Dashboard"},
                {text:"System", value: "Dashboard"}

            ]
        };

        component.set('v.parentOptions', pVals);
        component.set('v.dependentPicklist', dPick);

    },

    PickChange : function(component, event, helper) {
        var parentValue = component.find('parentPicklist').get('v.value');
        component.set('v.dependentOptions', component.get('v.dependentPicklist')[parentValue]);

        if(parentValue != '')
        component.set('v.disabledPick',false);
        else
        component.set('v.disabledPick',true);
    }
})

I want my will work but it doesnt give any output can anybody help here.

Thanks

Answer 1

<aura:attribute name="dependentOptions" type="List"/> this attribute is of type List. In your aura:if definition, You have compared it with String Value. This will never be satisfied to true.

<aura:if isTrue="{!v.dependentOptions == 'Report'}" >
    <a href="https://map.baidu.com"> Visit baidu!</a>
</aura:if> 

Also, you cannot use anchor tag inside Lightning:select component. only <option value="{!d.value}">{!d.text}</option> will get rendered. Even if aura:if is true, content inside will not come as select list.