如何为国家选择javascript下拉列表设置占位符

Question

我正在使用github的mrmarkfrench countryselect.js库来获取我的表单输入中的国家/地区列表。一切都很完美，但在这里我想要输入类型的占位符，因为默认它显示美国。

我不想要默认选择任何国家/地区。如果用户不通过输入字段来选择此输入，我希望用户提示。如何在这里设置占位符。任何帮助，都会感激不尽。

<input type="text" id="country" class="textBoxDashed">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="build/js/countrySelect.min.js"></script>
<script>
  $("#country").countrySelect();
</script>

Answer 1

更新

忘记OP请求required属性有效。现在它完美无缺。

一个。此过程涉及插件中的一个小修改：

1. 打开 countrySelect.js 的 unminified 副本（ 不是countrySelect.min.js ）

2. 向下滚动到源代码的底部，并在国家/地区列表末尾添加此内容：

   , {
       n: "",
       i: "xx"
   }
   

3. 保存文件。

B中。接下来，在</body>结束标记之前添加以下脚本：

$("#country").countrySelect({
    preferredCountries: ["xx"]
  });

  blankFlag.call(this);

  $("#country").on('change', blankFlag);

  function blankFlag(e) {
    if ($('.flag').hasClass('xx')) {

      $('.xx').addClass('blank');

     } else {

       return false;
     }
  }

℃。然后在标记中，将其添加到<input>标记：

placeholder="Select Country"

d。最后一步是添加下面演示中的CSS。

我们正在做的是在脚本中放置一个占位符元素，然后将其设置为 prefferedCountries 选项，然后使用小的白色gif作为标记图像和{{1}的透明gif }。

演示

修改后的插件缩小

:hover

$("#country").countrySelect({
    preferredCountries: ["xx"]
  });

  blankFlag.call(this);

  $("#country").on('change', blankFlag);

  function blankFlag(e) {
    if ($('.flag').hasClass('xx')) {

      $('.xx').addClass('blank');

     } else {
     
       return false;
     }
  }

.flag.xx.xx.blank.blank {
  background: url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=)round;
  background-size: cover;
}

.flag.xx.xx.blank.blank:hover {
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)round;
  background-size: cover;
}