Question

我想用国家和相关标志填充我的下拉列表。我经历了这个问题。

但仍然无法理解，因为工作模式被打破了。怎么做？

Answer 1

你在使用bootstrap吗？如果是这样，下面的链接中有一个非常有趣的表单助手

http://www.freenetmall.com/common/jquery/FormHelpers/docs/country.html

适合您情况的示例HTML代码段是

<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

如果这没有帮助，请提供更多信息，说明您是否将数据存储在数据库中并希望在下拉框中列出等等？有关该方法的更多信息将不胜感激。

Answer 2

这是基于select2的可搜索下拉列表：

$(function() {
  var isoCountries = [
    { id: 'AF', text: 'Afghanistan'},
    { id: 'AX', text: 'Aland Islands'},
    { id: 'AL', text: 'Albania'},
    { id: 'DZ', text: 'Algeria'},
    { id: 'AS', text: 'American Samoa'},
    // etc
  ];

  function formatCountry (country) {
    if (!country.id) { return country.text; }
    var $country = $(
      '<span class="flag-icon flag-icon-'+ country.id.toLowerCase() +' flag-icon-squared"></span>' +
      '<span class="flag-text">'+ country.text+"</span>"
    );
    return $country;
  };

  //Assuming you have a select element with name country
  // e.g. <select name="name"></select>

  $("[name='country']").select2({
    placeholder: "Select a country",
    templateResult: formatCountry,
    data: isoCountries
  });

});

jsFiddle

带有jQuery标志的国家选择器

2 个答案: