如何通过 JavaScript 或 jQuery 向选择元素添加占位符？答案

【问题标题】：How to add a placeholder to a select element via JavaScript or jQuery?如何通过 JavaScript 或 jQuery 向选择元素添加占位符？
【发布时间】：2021-02-04 18:14:20
【问题描述】：

我有一个动态生成的<select> 元素。默认情况下它没有占位符。我想通过JavaScript 或jQuery 为其添加一个占位符。我该怎么做？

我在这里有一个示例代码设置：

/* var elements = document.getElementsByClassName('select.selectName.form-control');

var elemJQuery = $('.ownerName.form-control');
// console.log(elemJQuery);
$('.ownerName.form-control').attr("placeholder", "One"); */

$(document).ready(function(){
  $('select.ownerName.form-control').attr("placeholder", "One");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectName form-control" style="width: 100%; visibility: visible">
  <option value></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

【问题讨论】：

标签： javascript html jquery drop-down-menu

【解决方案1】：

菜单没有占位符。正常的做法是将占位符放在第一个选项的文本中，默认选中。

$(document).ready(function(){
  $('select.selectName.form-control option:first-child').text("One");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectName form-control" style="width: 100%; visibility: visible">
  <option value></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select class="selectName form-control" style="width: 100%; visibility: visible">
  <option value></option>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
  <option value="d">D</option>
  <option value="e">E</option>
</select>

【讨论】：

嗨，Barmar，谢谢。这行得通。如果页面上有多个具有不同id 值的表，并且每个表具有相同的select 元素怎么办？我想为所有表中的所有选择设置占位符。这将不起作用，但类似于 $('#' + tableId + '.select.selectName.form-control option:first').text("One"); 其中tableId 是一个包含值的变量。
我已将其更新为使用:first-child，因此它将匹配每个下拉菜单中的第一个选项。
Barmar，感谢您的及时回复。它适用于所有表，除了空表和只有 1 行的表。对于有 1 行的表，在您从 select 中选择该 1 值的选项后，此占位符文本现在会显示在 dropdown 中。早些时候，它没有出现。对于空表，占位符根本不显示。
我们是否需要将selected 和disabled 之类的内容添加为attributes？
默认选择第一个选项。如果你愿意，你可以添加禁用。

【解决方案2】：

在动态生成选择时添加第一个选项禁用然后添加另一个列表我不知道您是如何生成选择元素的，希望这会对您有所帮助。

<!DOCTYPE html>
<html>
<body>
<select class="selectName form-control" id="slct" style="width: 100%; 
visibility: visible">
  <option value="" disabled selected>Select your option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

</body>
</html>

【讨论】：

问题是关于下拉菜单，而不是文本输入。