如何为mrmarkfrench countryselect.js下拉框设置占位符与默认未选中

安全阿岳

2026-5-15

解决方案：自定义countrySelect默认行为与必填校验

没问题，这几个需求都可以通过countrySelect的配置参数结合原生HTML属性轻松实现，我给你一步步说明：

1. 取消默认选中美国，添加占位符

countrySelect库自带了控制默认状态的配置项：

将defaultCountry设为空字符串""，就能让组件默认不选中任何国家，替代原本默认选中美国的行为
通过placeholder参数设置你想要显示的提示文本（比如"请选择您的国家/地区"）

2. 设置输入框为必填项

直接给input标签添加原生的required属性，浏览器就会在表单提交时自动校验是否已选择国家；如果需要自定义更贴合场景的校验提示文本，可以搭配oninvalid和oninput事件来实现（避免输入后提示文本残留）。

完整代码示例

<input 
  type="text" 
  id="country" 
  class="textBoxDashed"
  required
  oninvalid="this.setCustomValidity('请选择您的国家')"
  oninput="this.setCustomValidity('')"
> 
<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({
    defaultCountry: "",
    placeholder: "请选择您的国家/地区"
  }); 
</script>