How to set multiple value as selected in smartselect?

Questions
1

[Framework7 5.5.3]
I tried many ways to make it works but no luck. Can any one help me please?

<!-- component template -->

<template>
  <div class="page page-settings">
    <div class="navbar navbar-large-transparent">...</div>
    <div class="page-content">
	  <form id="settings-form">
	    <div class="list no-hairlines-md">
		  <li>
			<!-- Additional "smart-select" class -->
			<a href="#" class="item-link smart-select smart-city smart-select-init" data-open-in="sheet">
			    <select name="city" multiple>
				  {{#each city}}
					<option value="{{this.name}}">{{this.name}}</option>
				  {{/each}}
			    </select>
			  <div class="item-content">
				<div class="item-inner">
				  <!-- Select label -->
				  <div class="item-title">Select City</div>
				  <!-- Selected value, not required -->
				  <div class="item-after"></div>
				</div>
			  </div>
			</a>
		  </li>
		</div>
	  </form>
	</div>
  </div>
<template>

<script>
  // script must return component object
  return {
    data: function () {
      return {
        city: '', 
	selectedCity: ''
      }
},
methods: {
	markCity: function( objState ) {
	var city = objState.selectedCity;
	var	area = city.split(', ');
			
	// set city
	var smartSelectCity = app.smartSelect.get('.smart-city');
	smartSelectCity.setValue(area);		
  }
},
mounted() { 
  this.$f7ready(() => {
  var self = this;
app.request.promise.post('http://localhost/f7restful/api/get_city', {cid: country_id} )
.then(function (res) {
	const data = JSON.parse(res.data);
	const city = data.city;
        const myCity = data.myCity;
				
	const objState = { city: cities, selectedCity: myCity };
				
	// update component state with new state
	self.$setState(objState);
				
	// method call
	self.markCity(objState);
     });
  });
}
</script>
2

from the code i see that you dont declare the area var. also, any error in the console?

3

but adding var still doesn’t work.

4

can you share your array? also, any errors in the console?

5

no console error. and it is showing Array [ “Dublin”, “Galway” ]

6

its working fine for me.
here you have an example;

jsfiddle

7

Problem is when I’m trying list cities dynamically and then trying to set values as selected. I have updated the question. Please see the example below:

methods: {
markCity: function( objState ) {
var city = objState.selectedCity;
var	area = city.split(', ');

// set city
var smartSelectCity = app.smartSelect.get('.smart-city');
smartSelectCity.setValue(area);	
}
}

<li>
<!-- Additional "smart-select" class -->
<a href="#" class="item-link smart-select smart-city smart-select-init" data-open-in="sheet">
<select name="city" multiple>
{{#each city}}
<option value="{{this.name}}">{{this.name}}</option>
{{/each}}
</select>
<div class="item-content">
<div class="item-inner">
<!-- Select label -->
<div class="item-title">Select City</div>
<!-- Selected value, not required -->
<div class="item-after"></div>
</div>
</div>
</a>
</li>
8

i updated my example;

but basically you want this:

        on: {
          pageBeforeIn() {
            let vm = this
            // your ajax call here:
            setTimeout(() => {
              let ajaxResult = [{
                name: 'Dublin'
              }, {
                name: 'Cork'
              }, {
                name: 'Galway'
              }, {
                name: 'Limerick'
              }]
              let selectedCity = 'Dublin, Galway'
              let area = selectedCity.split(', ');
              vm.$setState({
                city: ajaxResult
              }, () => {
                let smartSelectCity = vm.$app.smartSelect.get('.smart-city');
                smartSelectCity.setValue(area)
              })
            }, 750)
          }
        },
1 Like
9

Thanks for your time, but options are generating dynamically with the help of return data object. In that case it is not selecting by using.

smartSelectCity.setValue(area)
10

what? i dont understand what yo meant.
did you even look at my updated code? in my code the options are also generated dynamically:

template:

...
<select name="city" multiple>
  {{#each city}}
    <option value="{{this.name}}">{{this.name}}</option>
 {{/each}}
</select>
...

the data: (note that city, its an EMPTY array.)

...
data: function() {
  return {
    title: 'Component Page',
    city: [],
  }
},
...

geting data from the backend/api: (in this case i use a timeout to simulate the ajax call, but its the same):

setTimeout(() => {
  // this part is equal to your response
  // app.request.promise.post('http://localhost/f7restful/api/get_city', {cid: country_id} ).then( res => { })
  // so res = ajaxResult
  let ajaxResult = [{
    name: 'Dublin'
  }, {
    name: 'Cork'
  }, {
    name: 'Galway'
  }, {
    name: 'Limerick'
  }]
  let selectedCity = 'Dublin, Galway'
  let area = selectedCity.split(', ')
  // Here i assign the new data (res) to the template data. the setState will tell f7 to re-render the component. so AFTER the setState, a callback is called.
  // So when the callback is called, we know that f7 has already rendered the component with the dinamically generated options.
  // Now we need to asign the selected options.
  vm.$setState({
    city: ajaxResult
  }, () => {
    let smartSelectCity = vm.$app.smartSelect.get('.smart-city');
    smartSelectCity.setValue(area)
  })
}, 750)
1 Like
11

Oh sorry, I didn’t see the fiddle link. It was hide. Now I can see your code and specially the anonymous function used as callback for $setState. I didn’t try this yet. But hopeful this will work.

1 Like