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

Question

我有一个<select>动态生成的元素。默认情况下它没有占位符。JavaScript我想通过or向它添加一个占位符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>

标签： javascripthtmljquerydrop-down-menu

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