CODEWITHSUNDEEP
javascripthtmljquerydrop-down-menu
Dashamlav
Dashamlav

Reputation: 245

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

I have a <select> element that is being generated dynamically. It does not have a placeholder by default. I want to add a placeholder to it via JavaScript or jQuery. How can I do that?

I have a sample code setup here:

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

Upvotes: 0

Views: 819

Answers (2)

Barmar
Barmar

Reputation: 781380

Menus don't have placeholders. The normal approach is to put the placeholder in the text of the first option, which is selected by default.

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

Upvotes: 2

Moman Raza
Moman Raza

Reputation: 168

while generating the select dynamically add the first option disabled then add the other list I don't know how you generating the select element I hope this will helped you.

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

Upvotes: 0

Related Questions