Framework7 v2 Smart Select

1

Hi guys,
I have this question:
I am creating the options for a smart select dynamically after page:init.

How can I set a option selected because right now its setting the first option as selected.

Thank You all
R. C. G. C

2

Hi,
Did you try with selected attr in the option you want?

<option value='2' selected> 2</option>
3

Yeap.
I am also printing on console.log the option that should be selected and it’s different from the one that is actually selected.

Basically the selected one is the first one and the one that should be selected is in the middle of the option.

4

So after further analysis, I actually find out the problem.

The Selected option is the correct one. The problem is changing the .item-after div html.

So, what happens is that on page:init You cannot find the div.item-after because it seems to be loaded on page:afterin.

so this is what I did:

$$(document).on('page:init', '.page.page-profile', function (e, page) {
    $$dCountry = displayCountryList("#displaycountry-list", $$mycountry);

    $$(document).on('page:afterin', '.page.page-profile', function (e, page) {
      $$("#dcc-user-displaycountry .smart-select .item-inner").find(".item-after").text($$dCountry);

      app.preloader.hide();
    });
});

And it Works at 50%. What I mean is that it changes the item-after but, because of page:afterin, it changes div.item-after back to $$mycountry instead of setting it to new chosen country.

Any Ideas?

5

After reading the doc again, find out that you can set both, select and item-afet

.list
  ul
    li
      a.item-link.smart-select(href='#')
        select(name='fruits')
          option(value='apple') Apple
          option(value='pineapple') Pineapple
          option(value='orange', selected='') Orange
        .item-content
          .item-inner
            .item-title Fruit
            //  -------->try adding this line<-------
            // -------->Selected value, not required<-------
            .item-after Orange

result

jsfiddle

1 Like
6

Yes, already checked that. the problem is when you change the value. It creates another div.item-after.