native select

controllers.application\.js

import Controller from '@ember/controller';
import { get, set } from '@ember/object'

export default Controller.extend({
  // Properties
  options: [{
  	id: '1',
    name: 'One',
    params: {
    	state: 'Completed'
    }
  }, {
  	id: '2',
    name: 'Two',
    params: {
    	state: 'Deleted'
    }
  }, {
  	id: '3',
    name: 'Three',
    params: {
    	state: 'Pending'
    }
  }],
  
  state: null,
  
  queryParams: ['state'],
  
  // Lifecycle hooks
  init() {
  	this._super(...arguments);
  	
    set(this, 'currentOption', get(this, 'options')[1]);
  },
 
  // Functions
  actions: {
  	selectOption(optionId) {
      const selectedOption = get(this, 'options').find((option) => option.id === optionId);
      set(this, 'state', selectedOption.params.state)
    }
  }
});

helpers.eq\.js

import { helper } from '@ember/component/helper';

export default helper(function eq([param1, param2]) {
  return param1 === param2;
});

templates.application\.hbs

<select onchange={{action "selectOption" value="target.value"}}>
	<option value=null>All</option>
  {{#each options as |option|}}
  	<option value={{option.id}} selected={{eq currentOption option}}>{{option.name}}</option>
  {{/each}}
</select>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "2.18.5"
  }
}