选择多个元素 semantic-ui 下拉列表

Question

Select 一个或多个编程方式，我可以为 select 字段执行此操作，但如果我使用 <div class="ui fluid multiple search selection dropdown"> 则我无法设置它们，这很重要，因为我想要格式化项目。

根据文档，您可以设置（selected([value1, value2]) 添加一组值作为 selected）

http://semantic-ui.com/modules/dropdown.html#multiple-search-selection

Answer 1

如果您的模板是

<div class="ui fluid search selection dropdown multiple countries">
    <input type="hidden" name="country">
    <i class="dropdown icon"></i>
    <div class="default text">Select Country</div>
    <div class="menu">
      <div class="item" each={ c, co in countries } data-value={c.abbr}>
        <i class={c.abbr + ' flag'}></i>
        {c.name}
      </div>
    </div>
  </div>

你有很多项目你必须设置传递数组的数据值，假设我们有数组

countries = [{name: 'Afganistan', abbr: 'af'},
    {name: 'Bolivia', abbr: 'bo'}, 
    {name: 'Brazil', abbr: 'br'},
    {name: 'Canada', abbr: 'ca'},
    {name: 'Colombia', abbr: 'co'},
    {name: 'Ecuador', abbr: 'ec'},
    {name: 'Peru', abbr: 'pe'},
    {name: 'USA', abbr: 'us'}
    ]

// to select

$('.ui.fluid.multiple').dropdown('set selected', ['bo', 'ec'])

选择多个元素 semantic-ui 下拉列表

Selecting multiple elements semantic-ui dropdown

semantic-ui