秘银 - 选择在进行选择时重新排序的选项

Question

（使用秘银0.2.4）

我有一个select元素，里面有几个选项。有时，当选择某个项目时，下拉列表中的选项顺序会发生变化，并以看似随机的方式重新排序。我没有用其他秘银选择元素看到这个，但是这个中的值是整数，我怀疑这是触发器。

以下是生成元素的代码

m('label[for=min_reach]', 'Minimum Reach')
m('select[name=min_reach]',{value: ctrl.minReach, onchange: () -> ctrl.minReach = @value; ctrl.updateStuff()}, [
  selectedReach = (key) -> 
    if ctrl.minReach == key then "[selected=selected]" else ''
  m('option[value=0]' + selectedReach('0'), '0')
  m('option[value=1000]' + selectedReach('1000'), '1,000')
  m('option[value=5000]' + selectedReach('5000'), '5,000')
  m('option[value=10000]' + selectedReach('10000'), '10,000')
  m('option[value=50000]' + selectedReach('50000'), '50,000')
  m('option[value=100000]' + selectedReach('100000'), '100,000')
  m('option[value=250000]' + selectedReach('250000'), '250,000')
  m('option[value=1000000]' + selectedReach('1000000'), '1,000,000')
])

在初始页面加载时，下拉列表中的选项按预期排序（上面显示的顺序）。但是在选择50,000之后，它现在看起来像：

如果我继续选择选项，则排序会不断变化。我的目标是保持下拉选项的顺序与上面代码中显示的顺序相同。

Answer 1

我会这样：

const ctrl = {
  minReach: 50000,
  updateStuff: () => { console.log('value selected: ' + ctrl.minReach)},
  opts: [0, 1000, 5000, 10000, 50000, 100000, 250000, 1000000]
}

const App = {
  view: () => [
    m('label[for=min_reach]', 'Minimum Reach'),
    m('select[name=min_reach]', {
      value: ctrl.minReach,
      onchange: e => {
        ctrl.minReach = ctrl.opts[e.target.selectedIndex]
        ctrl.updateStuff()
      }
    }, [
      ctrl.opts.map(o => m('option', { value: o }, o.toLocaleString()))
    ])
  ]
}

m.mount(document.getElementById('app'), App)

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/1.1.6/mithril.js" type="module"></script>
<div id="app"></div>