Multiple select elements brokes click event on page


#1

Hi,

I have three select elements in same page. But when i click anywhere in the page, shows only last select elements options. Where is my wrong?

Here is my html code;

<ion-content>

<ion-item>
    <ion-label>Öğün</ion-label>
    <ion-select   okText="Tamam" cancelText="İptal" placeholder="Seçiniz">
        <ion-option value="1">Kahvaltı</ion-option>
        <ion-option value="2">Ara Öğün 1</ion-option>
        <ion-option value="3">Öğle</ion-option>
        <ion-option value="4">Ara Öğün 2</ion-option>
        <ion-option value="5">Akşam</ion-option>
        <ion-option value="6">Ara Öğün 3</ion-option>
    </ion-select>
</ion-item>
<ion-card>
    <ion-card-content>
        <ion-grid>
            <ion-row>
                <ion-col width-20>
                    <ion-label>Gram</ion-label>
                </ion-col>
                <ion-col width-10>
                    <ion-label>:</ion-label>
                </ion-col>
                <ion-col width-75>
                    <ion-input ></ion-input>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col width-20>
                    <ion-label>{{type1Name}}</ion-label>
                </ion-col>
                <ion-col width-5>
                    <ion-label>:</ion-label>
                </ion-col>
                <ion-col width-75>
                    <ion-select  okText="Tamam" cancelText="İptal" placeholder="Seçiniz">
                        <ion-option value="0.25">1/4 {{type1Name}}</ion-option>
                        <ion-option value="0.5">1/2 {{type1Name}}</ion-option>
                        <ion-option value="1">1 {{type1Name}}</ion-option>
                        <ion-option value="2">2 {{type1Name}}</ion-option>
                        <ion-option value="3">3 {{type1Name}}</ion-option>
                        <ion-option value="4">4 {{type1Name}}</ion-option>
                        <ion-option value="5">5 {{type1Name}}</ion-option>
                    </ion-select>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col width-20>
                    <ion-label>{{type2Name}}</ion-label>
                </ion-col>
                <ion-col width-5>
                    <ion-label>:</ion-label>
                </ion-col>
                <ion-col width-75>
                    <ion-select okText="Tamam" cancelText="İptal" placeholder="Seçiniz">
                        <ion-option value="0.25">1/4 {{type2Name}}</ion-option>
                        <ion-option value="0.5">1/2 {{type2Name}}</ion-option>
                        <ion-option value="1">1 {{type2Name}}</ion-option>
                        <ion-option value="2">2 {{type2Name}}</ion-option>
                        <ion-option value="3">3 {{type2Name}}</ion-option>
                        <ion-option value="4">4 {{type2Name}}</ion-option>
                        <ion-option value="5">5 {{type2Name}}</ion-option>
                    </ion-select>
                </ion-col>
            </ion-row>
        </ion-grid>

    </ion-card-content>
</ion-card>