在选择选项中有一个占位符[重复]

Posted 2023-03-05

【中文标题】在选择选项中有一个占位符[重复]

【英文标题】：Having a placeholder in a Select option [duplicate]

【发布时间】：2015-02-10 01:09:01

【问题描述】：

如何在选择选项中获得等效的占位符？例如，当您有一个选择列表时，它可能会在“城市”字段中显示，然后单击它会在选项中显示所有城市。

【问题讨论】：

这个链接会帮助你***.com/questions/5805059/…

【参考方案1】：

我想这就是你想要的。

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();

试试这个jsfiddle。

【参考方案2】：

不知道这是不是你要找的东西

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
</select>

【讨论】：

我不得不承认，我从未考虑过将“禁用”应用于单个选项的可能性。我希望这具有所有预期的效果，并且没有重大后果......