使用JSON数据填充HTML5下拉列表值

Question

我有美国JSON数据如下

{"States":["Alaska","Alabama","Arkansas","American Samoa","Arizona","California","Colorado","Connecticut","District of Columbia","Delaware","Florida","Federated States of Micronesia","Georgia","Guam","Hawaii","Iowa","Idaho","Illinois","Indiana","Kansas","Kentucky","Louisiana","Massachusetts","Maryland","Maine","Marshall Islands","Michigan","Minnesota","Missouri","Northern Marianas","Mississippi","Montana","North Carolina","North Dakota","Nebraska","New Hampshire","New Jersey","New Mexico","Nevada","New York","Ohio","Oklahoma","Oregon","Pennsylvania","Puerto Rico","Palau","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Virginia","Virgin Islands","Vermont","Washington","Wisconsin","West Virginia","Wyoming","Armed Forces Europe, the Middle East, and Canada","Armed Forces Pacific","Armed Forces Americas"]}

现在在我的网络应用程序中，我反序列化JSON并绑定到HTML5下拉列表以获取以下内容

我想要的是那个;我如何修改JSON数据，以便当我绑定到下拉列表时，Value是状态代码，文本是完整的州名，所以有些像这样的事情

  <option value="IL">Illinois</option>

Answer 1

请注意options元素的optionsText属性中有data-bind和<select>。

如果你是json：

States:[
    { name:'Illinois', value:'IL'},
    { name:..., value:...},
    ....
]


<select data-bind="
    options: value, // IL, ... 
    optionsText: name, // Illinois, ...
    value: lead().state, 
    optionsCaption: 'Choose state...'">
</select>

Answer 2

我只能通过Blaise的回复进行微小改动，如下所示

  <select data-bind="
     options: states, 
     optionsValue: 'value'// IL, ... 
     optionsText: 'name', // Illinois, ...
     value: lead().state, 
     optionsCaption: 'Choose state...'">
  </select>