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

时间:2021-02-04 18:14:20

标签: javascript html jquery drop-down-menu

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

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

/* 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>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

<!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>
相关问题