如何通过 JavaScript 或 jQuery 向 select 元素添加占位符？

Question

我有一个动态生成的 <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>

Answer 1

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

<!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>

Answer 2

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

$(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>

如何通过 JavaScript 或 jQuery 向 select 元素添加占位符？

How to add a placeholder to a select element via JavaScript or jQuery?

html

javascript

jquery

drop-down-menu