我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。

这只会使下拉列表中的选项变灰(因此单击箭头后):

option:first {
    color: #999;
}

问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。

使用此选项会导致所选值始终为灰色(即使在选择实际选项后):

select {
    color: #999;
}

当前回答

HTML中有Cool属性,您可以使用它为select属性创建占位符在我的情况下,我使用以下代码,您可以根据您的要求更改它

 <select ref={relationship} required className="sellertype">
          <option value="" disabled selected hidden>Select Your Seller Type</option>
          <option value="1">Importer</option>
          <option value="2">Exporter</option>
          <option value="3">Local Seller</option>
          <option value="4">Local Buyer</option>
        </select>

现在“选择卖家类型”将作为占位符

其他回答

如果您正在阅读并使用React,请使用defaultValue。

<option defaultValue>Select a country here</option>

类似于:

HTML格式:

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

CSS:

#choice option { color: black; }
.empty { color: gray; }

JavaScript:

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

工作示例:http://jsfiddle.net/Zmf6t/

您可以在不使用JavaScript和仅使用HTML的情况下执行此操作。您需要将默认的select选项设置为disabled=“”和selected=“”,并选择所需的标记=“”。浏览器不允许用户在未选择选项的情况下提交表单。

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>

如果使用的是Angular,请执行以下操作:

<选择><option[ngValue]=“undefined”disabled selected>选择您的选项</option><option[ngValue]=“hurr”>Durr</option></选择>

您需要表单验证,现代浏览器从头开始就提供了这一功能。

因此,您不必担心用户无法选择字段。因为当他这样做时,浏览器验证会告诉他,这是一个错误的选择。

浏览器内置的验证函数checkValidatity()。

Bootstrap也有一个很好的例子。

HTML

<form class="needs-validation">
  <select required>
    <option value="">Please select an option</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
  </select>
<form>

Java脚本

form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
  //form validation succeeded
} else {
  //form validation failed
}